Comments on: Handling Checkboxes, Radio Buttons and Select Options in jQuery http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/ Web Development, Code Snippets, Technology, Reviews and Random Stuff Blog. Tue, 07 Oct 2008 04:45:44 +0000 http://wordpress.org/?v=2.6.1 By: THE|ODIN http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2871 THE|ODIN Thu, 18 Sep 2008 15:33:36 +0000 http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2871 thanks for the tips, some really usefull techniques here thanks for the tips, some really usefull techniques here

]]> By: blueonyx http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2831 blueonyx Sun, 03 Aug 2008 10:12:41 +0000 http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2831 Thank you so much. I have a problem with radio button and it resolved by your entry ^^ Thanks again & best wish for you :D Thank you so much. I have a problem with radio button and it resolved by your entry ^^

Thanks again & best wish for you :D

]]> By: TEA# http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2815 TEA# Wed, 16 Jul 2008 17:57:54 +0000 http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2815 For .NET you can grab it this way, which will get an ID that END WITH your original ID, meaning .NET can prepend whatever it wants on the front and you can get your control by ID. $("span[id*='spnBaleTxt']") For .NET you can grab it this way, which will get an ID that END WITH your original ID, meaning .NET can prepend whatever it wants on the front and you can get your control by ID.

$(”span[id*='spnBaleTxt']“)

]]> By: Tian http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2789 Tian Sun, 15 Jun 2008 00:13:09 +0000 http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2789 @Lacuna: I've found the best way to work with RadioButtons and jQuery in .NET (especially if the radiobuttons are embedded in datagrids, repeaters, etc that mangle the client ID's as per your example) is by using unique class names instead of ID's. The css class names do not have to occur in your css stylesheet (in fact, they shouldn't). If you're already using a CSS class for your radiobutton control, then add this new unique class to the existing one. E.g. two rbn's in the same group: Just be aware that as another poster mentioned, .NET renders the asp:RadioButton control as a SPAN with two controls inside it: a radio input and a label. The CssClass property will be applied to the containing SPAN and NOT to the embedded Radio input control. So you can have a jQuery click event handler like this: $(".rbnStyle").click(function() { //"this" will point to the SPAN var rbnId = $('#'+this.firstChild.id).attr('id'); alert("radiobutton id="+rbnId); }); Note: .change() won't work because the ".rbnStyle" selector will actually return the SPAN elements (cos they are given the style) and they don't support a change event. @Lacuna:
I’ve found the best way to work with RadioButtons and jQuery in .NET (especially if the radiobuttons are embedded in datagrids, repeaters, etc that mangle the client ID’s as per your example) is by using unique class names instead of ID’s. The css class names do not have to occur in your css stylesheet (in fact, they shouldn’t).
If you’re already using a CSS class for your radiobutton control, then add this new unique class to the existing one. E.g. two rbn’s in the same group:

Just be aware that as another poster mentioned, .NET renders the asp:RadioButton control as a SPAN with two controls inside it: a radio input and a label. The CssClass property will be applied to the containing SPAN and NOT to the embedded Radio input control.

So you can have a jQuery click event handler like this:

$(”.rbnStyle”).click(function() {
//”this” will point to the SPAN
var rbnId = $(’#'+this.firstChild.id).attr(’id’);
alert(”radiobutton id=”+rbnId);
});

Note: .change() won’t work because the “.rbnStyle” selector will actually return the SPAN elements (cos they are given the style) and they don’t support a change event.

]]> By: Lacuna http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2787 Lacuna Wed, 11 Jun 2008 12:40:31 +0000 http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2787 Thanks for this article however does anyone know how to do this through .net? The group name for example is unaccessible as it dynamically changes to an elongated variable at run-time. I.E. My previously named 'LiveOptions' radio button group name will change to: ctl00$ContentPlaceHolder1$TabContainer1$tabLiveOptions$liveDateManagementView$LiveOptions ~ Lacuna Thanks for this article however does anyone know how to do this through .net? The group name for example is unaccessible as it dynamically changes to an elongated variable at run-time.

I.E. My previously named ‘LiveOptions’ radio button group name will change to:
ctl00$ContentPlaceHolder1$TabContainer1$tabLiveOptions$liveDateManagementView$LiveOptions

~ Lacuna

]]> By: Tri' http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2769 Tri' Wed, 21 May 2008 10:01:25 +0000 http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2769 Thanks your your entry, it very very good, it resolved my prolem.thanks you. Thanks your your entry, it very very good, it resolved my prolem.thanks you.

]]> By: Alexandra http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2768 Alexandra Tue, 20 May 2008 21:24:37 +0000 http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2768 Thanks a lot for the method of getting selected radio button value: $("input[@name='option_layout']:checked").val() :) Thanks a lot for the method of getting selected radio button value:

$(”input[@name='option_layout']:checked”).val()

:)

]]> By: Flame http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2756 Flame Thu, 08 May 2008 04:44:26 +0000 http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2756 Great reference, thanks! Great reference, thanks!

]]> By: Đỗ Nam Khánh http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2746 Đỗ Nam Khánh Mon, 28 Apr 2008 14:00:11 +0000 http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2746 Thank you so much. I have a problem with radio button and it resolved by your entry ^^ Thanks again & best wish for you :) Thank you so much. I have a problem with radio button and it resolved by your entry ^^

Thanks again & best wish for you :)

]]> By: blogger http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2745 blogger Thu, 24 Apr 2008 03:41:18 +0000 http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-select-options-in-jquery/#comment-2745 I got a comment from <strong>Jagadeesh</strong> that submitted some code through my comment form asking why his dropdown select wasn't firing on the change event and he had a alert() debug in it. What I realized the switch wasn't testing for string values. Here is code for a html page showing a dropdown select that will change divs <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <script type="text/javascript" src="jquery-1.2.3.pack.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".propstatus_div").hide();//hide all $("#propStatusCd").change(function() { alert($(this).val());//debug $(".propstatus_div").hide();//hide all switch ($(this).val()) { case '0': $("#inactive").show(); break; case '1': $("#active").show(); break; default: $("#other").show(); } }); }); </script> </head> <body> <form action="" method="get"> <label>Property Status <select name="propStatusCd" id="propStatusCd"> <option>Select Something</option> <option value="0">Inactive</option> <option value="1">Active</option> <option value="2">Suspended</option> <option value="3">Closed</option> <option value="4">Pre-Deactive</option> <option value="5">Deactive</option> <option value="6">Non-Stay</option> <option value="7">Test</option> <option value="8">Non-Starwood</option> </select> </label> </form> <div id="inactive" class="propstatus_div" style="background:#f00;">This div is #inactive</div> <div id="active" class="propstatus_div" style="background:#0f0;">This div is #active</div> <div id="other" class="propstatus_div" style="background:#00f;">This div is #other</div> </body> </html> </code> I got a comment from Jagadeesh that submitted some code through my comment form asking why his dropdown select wasn’t firing on the change event and he had a alert() debug in it. What I realized the switch wasn’t testing for string values.

Here is code for a html page showing a dropdown select that will change divs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".propstatus_div").hide();//hide all
$("#propStatusCd").change(function()
{
alert($(this).val());//debug
$(".propstatus_div").hide();//hide all
switch ($(this).val())
{
case '0':
$("#inactive").show();
break;
case '1':
$("#active").show();
break;
default:
$("#other").show();
}
});
});
</script>
</head>
<body>
<form action="" method="get">
<label>Property Status
<select name="propStatusCd" id="propStatusCd">
<option>Select Something</option>
<option value="0">Inactive</option>
<option value="1">Active</option>
<option value="2">Suspended</option>
<option value="3">Closed</option>
<option value="4">Pre-Deactive</option>
<option value="5">Deactive</option>
<option value="6">Non-Stay</option>
<option value="7">Test</option>
<option value="8">Non-Starwood</option>
</select>
</label>
</form>
<div id="inactive" class="propstatus_div" style="background:#f00;">This div is #inactive</div>
<div id="active" class="propstatus_div" style="background:#0f0;">This div is #active</div>
<div id="other" class="propstatus_div" style="background:#00f;">This div is #other</div>
</body>
</html>

]]>