views:

2551

answers:

3

I am a newbie to Jquery, but I love what I have been able to do so far. I'm working on a long form that has several radio button groups. At the bottom is a radio button "No All". When it's selected I would like to make it so that all of the "N" radio buttons are selected, but I can't get it to work. Here is 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); 
});

});

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?

+1  A: 

Firstly as far as I'm aware 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 of selector for the remove all radio button as adding an input element filter isn't really necessary as $("#id") calls document.getElementById.

sighohwell
+1  A: 

Both of these 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's not really a way to uncheck them once they've been checked.

$("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");
});
Andy Gaskell
Thank you Andy!!! I used your first option and it worked like a champ. I would like to uncheck the radio button...but it took me so long to get this far, I figured that's a little over my head right now :)
Chnikki
I don't think you really have to remove the "checked" attribute as you can only select one radio button selection at a time anyway, but the rest of your code looks good.
Steven Rogers
A: 

This should do what you need...

$("input.#RemoveAll").click(function() {

  if ($(this).attr('checked') === "checked"){

    $("input:radio[class*='radioR']").attr("checked","checked"); 

  }else{

    $("input:radio[class*='radioR']").removeAttr("checked"); 

  }
});

hope it helps, Sinan.

Sinan Y.