JQuery Select All Radio Button Group
I am working on a long form that has several groups of radio buttons.
At the bottom is the "No All" radio button. When it is selected, I would like to make it so that all the "N" radio buttons are selected, but I cannot get it to work. Here's a simplified version of the code:
JQuery
$(document).ready(function(){
//initially hide the Remove All Questions
$("div.#removeAllquest").hide();
//////////// Show Remove All Questions if radio button selected
$("input.#RemoveAll").click(function() {
if ($(this).is(':checked'))
$("input:radio [class*='radioR']").attr("checked",true);
else
$("input:radio [class*='radioR']").attr("checked",false);
});
});
The form:
<table>
<tr>
<td>Y<input type="radio" name="row1" value="row1col1" class="q123col1"></td>
<td>N<input type="radio" name="row1" class="radioR" value="row1col2"></td>
<td>M<input type="radio" name="row1" value="row1col3" class="q123col3"></td>
</tr>
<tr>
<td>Y<input type="radio" name="row2" value="row2col1" class="q123col1"></td>
<td>N<input type="radio" name="row2" class="radioR" value="row2col2"></td>
<td>M<input type="radio" name="row2" value="row2col3" class="q123col3"></td>
</tr>
<tr>
<td>Y<input type="radio" name="row3" value="row3col1" class="q123col1"></td>
<td>N<input type="radio" name="row3" class="radioR" value="row3col2"></td>
<td>M<input type="radio" name="row3" value="row3col3" class="q123col3"></td>
</tr>
<tr>
<td colspan="2">No All </td>
<td>
<input name="RemoveAll" id="RemoveAll" type="radio" value="Y">
</td>
</tr>
</table>
What am I doing wrong?
source to share
Both of them should work - with the first one I tried to keep your style. With the second, I changed the style a bit. With your sample, there is really no way to uncheck them once they've been tested.
$("input.#RemoveAll").click(function() {
if ($(this).is(':checked'))
$("input:radio.radioR").attr("checked", "checked");
else
$("input:radio.radioR").removeAttr("checked");
});
$("#RemoveAll").click(function() {
if ($(this).is(':checked'))
$(".radioR").attr("checked", "checked");
else
$(".radioR").removeAttr("checked");
});
source to share
First, as far as I know, checked only accepts checked as a valid value in XHTML. So something like the following should do the trick
$("#RemoveAll").change(function() {
if ($(this).is(':checked'))
$("input:radio.radioR").attr("checked","checked");
else
$("input:radio.radioR").removeAttr("checked");
});
});
Note the change in the selector to remove all radio buttons, since adding an input element filter is really not required because $ ("# id") calls document.getElementById.
source to share