jqueryradio-buttonchecked

Radio button checked status with jQuery


Here is the basic code

<ul>
 <li>
  <input type="radio" name="r" value="a" id="a" checked="checked" />
  <label for="a">A</label>
 </li>
 <li>
  <input type="radio" name="r" value="b" id="b" />
  <label for="b">B</label>
 </li>
</ul>

So I need to have it work as:

1 Click on the <label> and check if the sibling <radio> is checked="checked" then add "selected" class to the parent <li>

2 Click on the <label> and check if the sibling <radio> is NOT checked then add checked="checked" to the sibling <radio> and add "selected" class to the parent <li> also remove all the other "checked" and "selected" in the <ul>

Could you help me please!


Solution

  • Clicking on the label should check the radio buttons automatically in the browser. So, you just need do add a click event to the label/input that will set the class on the li's.

    Something like this should work:
    HTML (I just added id="mylist")

    <ul id="mylist">
     <li>
      <input type="radio" name="r" value="a" id="a" checked="checked" />
      <label for="a">A</label>
     </li>
     <li>
      <input type="radio" name="r" value="b" id="b" />
      <label for="b">B</label>
     </li>
    </ul>

    JavaScript

    $(function() {
     $("#mylist input, #mylist label").click(function() {
      $("#mylist li").removeClass("selected");
      $(this).parent().addClass("selected");
     });
    });