Question

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!

Answer 1

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");
 });
});