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.
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.
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>
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>
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.
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:nor mal;"> Credit Card</span>
<input type="radio" name="echeck "value="E Check" id="eCheck"><span style="color:#075D88;font- weight:nor mal;"> 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("cli ck",functi on(){
$("#creditCardId").css("ba ckground-c olor","#FF CCCC");
$("#eCheckId").css("backgr ound-color ","#FFFFFF ");
$('input[name="credit"]'). prop('chec ked', true);
$('input[name="echeck"]'). prop('chec ked', false);
});
$("#eCheck").bind("click", function() {
$("#eCheckId").css("backgr ound-color ","#FFCCCC ");
$("#creditCardId").css("ba ckground-c olor","#FF FFFF");
$('input[name="echeck"]'). prop('chec ked', true);
$('input[name="credit"]'). prop('chec ked', false);
});
HTML code:
<div class="payment-method">
Payment Method: <input type="radio" name="credit" value="Credit Card" id="creditCard"><span style="color:#075D88;font-
<input type="radio" name="echeck "value="E Check" id="eCheck"><span style="color:#075D88;font-
</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("cli
$("#creditCardId").css("ba
$("#eCheckId").css("backgr
$('input[name="credit"]').
$('input[name="echeck"]').
});
$("#eCheck").bind("click",
$("#eCheckId").css("backgr
$("#creditCardId").css("ba
$('input[name="echeck"]').
$('input[name="credit"]').
});
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">
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:
HTML (Observe radio group with same name, which mean only one can be checked event without JavaScript):
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");
}
)
}
);
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>
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>
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....
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">
whereas it should be this<input type="radio" name="echeck" value="E Check" id="eCheck">
If you make that small adjustment, then your code should work fine, then you can ignore my other suggestions. :)
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?
ASKER
It works now!
However,I have replaced your jQuery code with my previous code and its working now.
Thanks so much.
However,I have replaced your jQuery code with my previous code and its working now.
Thanks so much.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I will give you full 500 points.Sorry,got busy with some other work and just came online.
:)
Thank you again:)
:)
Thank you again:)
ASKER
Thank You.
Open in new window