jquery - 如何根据复选框的值创建 jquery 事件？

Question

基本上我有一个复选框列表，如果主复选框可见，我需要默认隐藏并显示它们

<div class="parent"> 
    <input type="checkbox" class="subjectChk"> 
    <div class="childCont">
        <input type="checkbox" class="subjGradeChk hidden">
    </div>
</div>
<div class="parent"> 
    <input type="checkbox" class="subjectChk"> 
    <div class="childCont">
        <input type="checkbox" class="subjGradeChk hidden">
    </div>
</div>

目标是说如果subjectChkvalue 被检查然后 removeClass hiddenfromsubjGradeChk

我试过做这样的事情

$('.subjGradeChk').on('click',function(){ 
if(this.checked){ 
$(.subjGradeChk).removeClass('hidden'); } });

但我希望它只影响基于父级的每个实例

Answer 1

我建议，最简单的：

// binds the 'change' event-handler to all elements with that class:
$('.subjectChk').change(function(){
    /* selects the closest '.parent' element from the changed element,
       finds the '.subjGradeChk' element(s) within that parent,
       if the changed element is 'checked' we use the removeClass() method,
       otherwise the addClass() method to change the '.hidden' class: */
    $(this).closest('.parent').find('.subjGradeChk')[this.checked ? 'removeClass' : 'addClass']('hidden');
// we trigger the 'change' event:
}).change();

JS 小提琴演示。

参考：

• addClass().
• change().
• closest().
• find().
• removeClass().

Answer 2

用这个

if($('.subjectChk').attr('checked')){
 $('.subjectChk').next().show();` 
}else{
 $('.subjectChk').next().hide();   

}`

Answer 3

事件会是这样的：

$('.subjGradeChk').on('click',function(){
    if(this.checked){
        $(this).removeClass('hidden');
    }
});

this.checked是 vanilla JS，但对于像这种 vanilla JS 这样的情况，效果很好。而且它的垃圾加载速度更快。:D