Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1190
  • Last Modified:

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.
0
dvcphp
Asked:
dvcphp
  • 11
  • 8
1 Solution
 
Ovid BurkeCreative DirectorCommented:
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 BurkeCreative DirectorCommented:
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
 
Ovid BurkeCreative DirectorCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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

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

Open in new window

0
 
Ovid BurkeCreative DirectorCommented:
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 BurkeCreative DirectorCommented:
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 BurkeCreative DirectorCommented:
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 BurkeCreative DirectorCommented:
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
 
Ovid BurkeCreative DirectorCommented:
No points? :)
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 11
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now