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.
dvcphpAsked:
Who is Participating?
 
Ovid BurkeConnect With a Mentor Consultant InstructorCommented:
No points? :)
0
 
Ovid BurkeConsultant InstructorCommented:
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

0
 
Ovid BurkeConsultant InstructorCommented:
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

0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
Ovid BurkeConsultant InstructorCommented:
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

0
 
dvcphpAuthor Commented:
The code doesn't work.It doesn't change the background color
0
 
Ovid BurkeConsultant InstructorCommented:
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.
0
 
dvcphpAuthor Commented:
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);
                                                             
                                                               
                                                               });
0
 
Ovid BurkeConsultant InstructorCommented:
Take a look at the white spaces at input with name 'echeck'.
0
 
Ovid BurkeConsultant InstructorCommented:
I suspect it should be

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

Open in new window

0
 
Ovid BurkeConsultant InstructorCommented:
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

0
 
Ovid BurkeConsultant InstructorCommented:
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

0
 
dvcphpAuthor Commented:
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....
0
 
dvcphpAuthor Commented:
Now both the radio buttons are checked even if you make one selection....
0
 
Ovid BurkeConsultant InstructorCommented:
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. :)
0
 
dvcphpAuthor Commented:
I made that correction,still it is the same.Both buttons are checked:(
0
 
Ovid BurkeConsultant InstructorCommented:
Can you refresh the page in your browser, and let me know what happens?
0
 
dvcphpAuthor Commented:
It works now!

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

Thanks so much.
0
 
dvcphpAuthor Commented:
I will give you full 500 points.Sorry,got busy with some other work and just came online.
:)
Thank you again:)
0
 
dvcphpAuthor Commented:
Thank You.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.