Как использовать jQuery, чтобы назначить класс только одной радиокнопке в группе, когда пользователь нажимает на нее?

Question

У меня есть следующая разметка. Я хотел бы добавить class_A к <p class="subitem-text"> (который содержит переключатель и метку), когда пользователь нажимает <input> или <label>.

Если пользователь щелкает некоторые другие переключатели / метки в той же группе, я хотел бы добавить class_A в родительский абзац этого переключателя и удалить class_A из любого другого абзаца, который содержит переключатели / ярлыки в этой группе. Фактически, в каждом <li> только один <p class="subitem-text"> должен иметь добавленный class_A.

Есть ли плагин jQuery, который это делает? Или есть простой трюк, который может это сделать?

<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

ДЕМО: http://jsbin.com/ebaye3

поскольку вы помещаете все внутрь P, вы можете использовать его!

* +1007 *

Answer 2

Вы можете сделать что-то вроде этого:

  // 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

Нет заданного способа сделать это, так как это зависит от HTML в вашем документе. Самый простой способ сделать это - привязать каждый из ваших элементов радиовхода, но вы также можете использовать делегирование событий и привязку к div.myitem-wrapper, li, parent ul или тегу body event.

Просто привязка обработчиков кликов к каждому интересующему нас элементу ввода:

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

То же самое, но с использованием делегирования события, чтобы уменьшить количество обработчиков до одного. Это действительно может ускорить процесс, если вы обнаружите, что привязываетесь к большому количеству элементов.

* +1007 *

Обратите внимание, что совершенно правильно сказать $(this) вместо $(event.target), но это даст другие результаты, если и когда вы начнете переходить к делегированию событий. Дополнительным преимуществом является то, что вам или следующему парню будет проще понять код в течение двух месяцев, если вы перейдете с event.target .

Answer 4

Как это:

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

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