javascript - 如果包含多个复选框的 div 中的一个复选框被选中，则为所有复选框添加类

Question

如果仅选中该 div 中的一个复选框，我想向该 div 中的所有复选框添加一个类。我不认为我离得太远，但我被困住了。这是我得到的。

var checkboxes = $("#myContent input[type='checkbox']");
$(document).on("click", checkboxes, function() {
    if(checkboxes.is(":checked")) {
        checkboxes.removeClass('invalid').addClass('valid');
    }
    else {
        checkboxes.removeClass('valid').addClass('invalid');
    }
});

我尝试用警报代替 addClass/removeClass，但在选中复选框和取消选中时都会收到相同的警报(“else”语句中的警报)。我一定就在这儿附近，有人知道我错过了什么吗？

我的 HTML 如下(我也在使用 Smarty):

<div class="pd5" id="myContent">
                        {foreach from=$cLibrary key=k item=l}
                        <div class="clrBoth {cycle values=',AltRows0'} pd5 fLeft p100">
                            <input type="hidden" name="isform[{$k}]" value="{$l.isform}" class="valid" />
                            <div class="fLeft px20">
                                <input type="checkbox" value="{$k}" name="contentValue[{$k}]" id="contentData_{$k}" class="invalid" {foreach item=cn key=po from=$selectedContent}{if $cn eq $k} checked {/if}{/foreach} />
                            </div>
                        </div>
</div>

Answer 1

1. 要检查条件，请使用 if(this.checked)

2. 如果您在变量中定义复选框选择器，则动态元素将不计算在内。因此委托(delegate)事件是没有用的。

<小时/>

$(document).on("click", "#myContent :checkbox", function (e) {

    if (this.checked) {
        $('#myContent :checkbox').removeClass('invalid').addClass('valid');
    } else {
        $('#myContent :checkbox').removeClass('valid').addClass('invalid');
    }
});

<强> Fiddle