Question

我想为每个复选框输入添加一个jQuery处理程序，以便在更改它们的值时（通过直接单击它们或通过单击通过“for”属性绑定到它们的标签），为true（或checked =“checked”）一个名为“selected”的类被添加到父li元素。

相反，当单击事件取消选中该复选框时，我想从li元素中删除“selected”类。

<li class="section">
    <label class="left" for="my_ad_stacked">Left Label</label>
    <input type="checkbox" name="my_ad_stacked" id="my_ad_stacked" value="true"  />
    <label for="my_ad_stacked" class="description check ">label info goes here</label>
</li>

我知道如果我知道元素的id或类，我可以使用$（'myElement'）。addClass（'selected'）和$（'myElement'）。removeClass（'selected'）。我只是不确定如何动态地将行为附加到所有复选框元素以及它们的“for”绑定标签。

Answer 1

$("input[type=checkbox]").change(function() {
   $(this).closest("li").toggleClass("selected");
});

这会将change事件绑定到input类型的每个checkbox元素。当一个更改时，事件处理函数将运行，并切换最近的selected元素上的li类。

在事件处理程序中，this指的是已更改的复选框，因此这适用于所有复选框（假设页面上的所有复选框都有li元素祖先）。

这是example fiddle，显示了这一点。

Answer 2

$(":checkbox, :checkbox + label").click(function()
{
    var li = $(this).closest("li");
    var chk = $(this).parent().find(":checkbox");

    if(chk.is(":checked")) li.addClass("selected");
    else li.removeClass("selected");
});

Answer 3

$(':checkbox').change(function(){
    var $checkbox = $(this),
        $li = $checkbox.parents('li');
    if($checkbox.is(':checked')){
        $li.addClass('selected');
    } else{
        $li.removeClass('selected');
    }
});

Test it here »

jQuery将点击行为绑定到匹配元素的集合

3 个答案: