Link to home
Start Free TrialLog in
Avatar of dvcphp
dvcphp

asked on

radio button check and uncheck in jquery

Hello Experts,
I have written a code in jquery in which there are 2 radio buttons and 2 <div> .When you click on the first radio button,the background color changes in the first <div> and when you click on the second radio button,the background color of the second <div> changes.
      My problem is that,this works perfect with the changing of background color.BUT when I click the first radio button the second time,both the radio buttons are checked instead of the first one to be checked and when I click the second radio button,it works fine.Problem is when the first radio button is clicked,the second radio button is also shown as clicked.

Please help,
Thanks.
Avatar of Ovid Burke
Ovid Burke
Flag of Saint Vincent and the Grenadines image

Try:
<!DOCTYPE HTML>
<html>
<head>
<title>ee_radio</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="/assets/js/jquery.core.js"></script>
<script>
$(window).ready(
function()
{
	$('input[name=my_choice]').click(
		function()
		{
			var index = $(this).index();
			var elem = $('.my_div')[index]
			$('.my_div').css( { backgroundColor: 'white' } );
			$(elem).css( { backgroundColor: 'black' } );
		}
	);
	
}
);
</script>
</head>

<body>
<div id="wrapper">
<input type="radio" name="my_choice" id="my_choide_1" value="1">
<input type="radio" name="my_choice" id="my_choide_2" value="2">

<div id="my_div_1" class="my_div">

</div>
<div id="my_div_2" class="my_div">

</div>
</div>
</body>
</html>

Open in new window

Few tweaks and notes for clarity:
<!DOCTYPE HTML>
<html>
<head>
<title>ee_radio</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="/assets/js/jquery.core.js"></script>
<script>
$(window).ready(
function()
{
	$('input[name=my_choice]').click(
		function()
		{
			var index = $(this).index(); // get the index of the clicked button
			var elem = $('.my_div')[index] // find the matching div
			$('.my_div').css( { backgroundColor: 'white', color: 'black' } ); // clear color on all matching divs
			$(elem).css( { backgroundColor: 'black', color: 'white' } ); // add color to specific div.
		}
	);
	
}
);
</script>
</head>

<body>
<div id="wrapper">
<label><input type="radio" name="my_choice" id="my_choide_1" value="1"> 1</label>
<label><input type="radio" name="my_choice" id="my_choide_2" value="2"> 2</label>

<div id="my_div_1" class="my_div">
1: This is the 1st DIV
</div>
<div id="my_div_2" class="my_div">
2: This is the 2nd DIV
</div>
</div>
</body>
</html>

Open in new window

I think I messed that up by adding the 'label' tags... so let's remove them again.
<!DOCTYPE HTML>
<html>
<head>
<title>ee_radio</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="/assets/js/jquery.core.js"></script>
<script>
$(window).ready(
function()
{
	$('input[name=my_choice]').click(
		function()
		{
			var index = $(this).index(); // get the index of the clicked button
			var elem = $('.my_div')[index] // find the matching div
			$('.my_div').css( { backgroundColor: 'white', color: 'black' } ); // clear color on all matching divs
			$(elem).css( { backgroundColor: 'black', color: 'white' } ); // add color to specific div.
		}
	);
	
}
);
</script>
</head>

<body>
<div id="wrapper">
<input type="radio" name="my_choice" id="my_choide_1" value="1">
<input type="radio" name="my_choice" id="my_choide_2" value="2">

<div id="my_div_1" class="my_div">
1: This is the 1st DIV
</div>
<div id="my_div_2" class="my_div">
2: This is the 2nd DIV
</div>
</div>
</body>
</html>

Open in new window

Avatar of dvcphp
dvcphp

ASKER

The code doesn't work.It doesn't change the background color
please test using the code in the very last post I made. I am confident that it is working. However, if you would post your code it would make easier to see exactly may or may not be working with it.
Avatar of dvcphp

ASKER

My code is below:

HTML code:

<div class="payment-method">
Payment Method: <input type="radio" name="credit" value="Credit Card" id="creditCard"><span style="color:#075D88;font-weight:normal;"> Credit Card</span>
<input type="radio" name="echeck "value="E Check" id="eCheck"><span style="color:#075D88;font-weight:normal;">  E Check</span>


</div>


<div style="width:700px;">
  <div class="rate-bottom" id="creditCardId">
 
  <p style="margin-right:90px;">
  Some description...........
 
</p>
  </div>
 
  <div class="fees-bottom" id="eCheckId">
 
  <p style="margin-right:90px;">
  Some description............
  </p>
 
  </div>




jQuery Code:

$("#creditCard").bind("click",function(){
                                                                    
                                                                     $("#creditCardId").css("background-color","#FFCCCC");
                                                                     $("#eCheckId").css("background-color","#FFFFFF");
                                                                    
                                                                     $('input[name="credit"]').prop('checked', true);
                                                                     $('input[name="echeck"]').prop('checked', false);
                                                                    
                                                                      
                                                                    
                                                                    
                                                                  
                                                                     });
            $("#eCheck").bind("click",function(){
                                                                                                                                                    
                                                                         
                                                               $("#eCheckId").css("background-color","#FFCCCC");
                                                               $("#creditCardId").css("background-color","#FFFFFF");
                                                                 
                                                                  $('input[name="echeck"]').prop('checked', true);
                                                                    $('input[name="credit"]').prop('checked', false);
                                                             
                                                               
                                                               });
Take a look at the white spaces at input with name 'echeck'.
I suspect it should be

<input type="radio" name="echeck" value="E Check" id="eCheck">

Open in new window

Since you only want ONE radio button to be chosen/checked you could also consider this alternative, which eliminates a few line of code:

jQuery:

$('input', '.payment-method').bind('click', function()
{
	var $opt = $(this);
	$opt.each(function()
	{
		var desc = '#' + $opt.attr('id') + 'Id';
		$(desc).css("background-color","#FFCCCC")
		.siblings('div').css("background-color","#FFFFFF");
	}
	)
}
);

Open in new window


HTML (Observe radio group with same name, which mean only one can be checked event without JavaScript):

<div class="payment-method"> Payment Method:
  <input type="radio" name="method" value="Credit Card" id="creditCard">
  <span style="color:#075D88;font-weight:normal;"> Credit Card</span>

  <input type="radio" name="method" value="E Check" id="eCheck">
  <span style="color:#075D88;font-weight:normal;"> E Check</span> </div>
<div style="width:700px;">
  <div class="rate-bottom" id="creditCardId">
    <p style="margin-right:90px;"> Some description........... </p>
  </div>
  <div class="fees-bottom" id="eCheckId">

    <p style="margin-right:90px;"> Some description............ </p>
  </div>
</div>

Open in new window

I would also replace the span elements with label and include the 'for' attribute to make the buttons selectable by also clicking in the text (labels).

<div class="payment-method"> Payment Method:
  <input type="radio" name="method" value="Credit Card" id="creditCard">
  <label for="creditCard" style="color:#075D88;font-weight:normal;"> Credit Card</label>
  <input type="radio" name="method" value="E Check" id="eCheck">
  <label for="eCheck" style="color:#075D88;font-weight:normal;"> E Check</label>
</div>

Open in new window

Avatar of dvcphp

ASKER

This doesn't work too.The background color is changing like before but the checkbox 2 is selected even if clicked on the first radio button.Both are checked....
Avatar of dvcphp

ASKER

Now both the radio buttons are checked even if you make one selection....
In your code, you have this
<input type="radio" name="echeck "value="E Check" id="eCheck">

Open in new window

whereas it should be this
<input type="radio" name="echeck" value="E Check" id="eCheck">

Open in new window

If you make that small adjustment, then your code should work fine, then you can ignore my other suggestions. :)
Avatar of dvcphp

ASKER

I made that correction,still it is the same.Both buttons are checked:(
Can you refresh the page in your browser, and let me know what happens?
Avatar of dvcphp

ASKER

It works now!

However,I have replaced your jQuery code  with my previous code and its working now.

Thanks so much.
ASKER CERTIFIED SOLUTION
Avatar of Ovid Burke
Ovid Burke
Flag of Saint Vincent and the Grenadines image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dvcphp

ASKER

I will give you full 500 points.Sorry,got busy with some other work and just came online.
:)
Thank you again:)
Avatar of dvcphp

ASKER

Thank You.