How to use jQuery to assign a class to only one radio button in a group when user clicks on it?

Question

I have the following markup. I would like to add class_A to <p class="subitem-text"> (that holds the radio button and the label) when user clicks on the <input> or <label>.

If user clicks some other radio-button/label in the same group, I would like to add class_A to this radio-button's parent paragraph and remove class_A from any other paragraph that hold radio-buttons/labels in that group. Effectively, in each <li>, only one <p class="subitem-text"> should have class_A added to it.

Is there a jQuery plug-in that does this? Or is there a simple trick that can do this?

<ul>
<li>
    <div class="myitem-wrapper" id="10"> 
        <div class="myitem clearfix">
            <span class="number">1</span>
            <div class="item-text">Some text here </div>
        </div>
        <p class="subitem-text">
            <input type="radio" name="10" value="15" id="99">
            <label for="99">First subitem </label>
        </p>
        <p class="subitem-text">
            <input type="radio" name="10" value="77" id="21">
            <label for="21">Second subitem</label>
        </p>

    </div>
</li>

<li>
    <div class="myitem-wrapper" id="11"> 
        <div class="myitem clearfix">
            <span class="number">2</span>
            <div class="item-text">Some other text here ... </div>
        </div>
        <p class="subitem-text">
            <input type="radio" name="11" value="32" id="201">
            <label for="201">First subitem ... </label>
        </p>
        <p class="subitem-text">
            <input type="radio" name="11" value="68" id="205">
            <label for="205">Second subitem ...</label>
        </p>

        <p class="subitem-text">
            <input type="radio" name="11" value="160" id="206">
            <label for="206">Third subitem ...</label>
        </p>
    </div>
</li>
</ul>   

Answer 1

Like this:

$(':radio').click(function() {
    $(this).closest('ul').find('.subitem-text').removeClass('active');

    $(this).closest('.subitem-text').addClass('active');
});

Answer 2

You can do something like this:

  // find all the radio inputs inside a subitem-text
  $('.subitem-text input[type=radio]').bind('change', function() {
    // find our parent LI
    var $li = $(this).closest('li'); 
    // remove any "class_A" 
    $li.find('.class_A').removeClass('class_A');
    // find the subitem with the checked input and add "class_A"
    $li.find('.subitem-text:has(input[checked])').addClass('class_A');
  });

jsbin preview/demo

Answer 3

DEMO: http://jsbin.com/ebaye3

since you are putting all inside P you can use it!

$(function($) {
    $('.subitem-text').click(function() {
        $(this).parent().find('.subitem-text').removeClass('class_A');
        if ( $(this).children(':radio').is(':checked') ) // for sake! ;-)
        $(this).addClass('class_A');
    });
   //you can also write it like this:

  $('.subitem-text :radio').click(function() {
    $(this).parent().parent().children().removeClass('class_A');
    if ( $(this).is(':checked') )
    $(this).parent().addClass('class_A');
   });

});

Answer 4

There is no set way to do this since it is dependent on the html in your document. The simplest way to do this is to bind to each of your radio input elements but you can also use event delegation and bind to the div.myitem-wrapper, li, parent ul or event body tag.

Just binding click handlers to each of the input elements we are interested in:

$("div.myitem-wrapper input[type=radio]").bind('change', function (event) {
    $(event.target).is(':checked').closest('p')
        .addClass('class_A')
        .siblings('p.subitem-text').removeClass('class_A');
});

Same thing but using event delegation to reduce the number of handlers to one. This can really speed things up if you find that you are binding to a large number of elements.

$("#id_of_the_parent_UL").bind('change', function (event) {
    var $target = $(event.target);
    if ($target.is('input[type=radio]:checked')) {
        $target.closest('p')
            .addClass('class_A')
            .siblings('p.subitem-text').removeClass('class_A');
    }
});

Note that it is perfectly valid to say $(this) instead of $(event.target) but it will give different results if and when you start moving to event delegation. An added advantage is that it will be easier for you or the next guy to understand the code in in two months if you go with event.target.