jQuery根据复选框单击隐藏表行

我试图隐藏复选框取决于点击另一个复选框，它的工作为一行，但我希望它为许多行

（例如）

如果单击复选框1，则复选框2、3、6和7应隐藏 如果单击复选框2，则复选框1、3、5应隐藏

--编辑：-）

您好

非常感谢所有的帮助，终于可以使用多个类和event.target了

看

--上次编辑：-） 我将使用Muleskinner的解决方案，因为它不需要构建不同的类，而且对于动态表单更容易。如果复选框隐藏，我将添加一些内容来删除选中的属性

您可以这样做（但我认为您的标记可能会更好），使用检查哪个复选框已选中/未选中：

$('.wpbook_hidden').show();

$(':checkbox').change(function(e) {
    if($(this).is(':checked')){
        $('.wpbook_option_'+e.target.id).fadeOut('slow');
    }else{
        $('.wpbook_option_'+e.target.id).fadeIn('slow');
    }
});

在这里拉小提琴：

希望能有所帮助

jquery：

$("#set_1").click(function(){
    var ids = [2,3,5,6];
    if($(this).is(":checked")){
        for(i=0;i<ids.length;i++){
            $("#set_"+ids[i]).parent("p").fadeOut(400);
        }
    }
    else{
        for(i=0;i<ids.length;i++){
            $("#set_"+ids[i]).parent("p").fadeIn(400);
        }
    }
})

$（“#设置_1”）。单击（函数（）{
变量ID=[2,3,5,6]；
如果（$（this）.is（“：checked”））{
对于（i=0；i对于此HTML

<div>
    <label for="cb1"><input type="checkbox" id="cb1"/>1</label>
    <label for="cb2"><input type="checkbox" id="cb2"/>2</label>
    <label for="cb3"><input type="checkbox" id="cb3"/>3</label>
    <label for="cb4"><input type="checkbox" id="cb4"/>4</label>
    <label for="cb5"><input type="checkbox" id="cb5"/>5</label>
    <label for="cb5"><input type="checkbox" id="cb6"/>6</label>
    <label for="cb7"><input type="checkbox" id="cb7"/>7</label>
</div>
<p>Click checkbox 1, checkbox 2, 3, 6 and 7 should hide</p>
<p>Click checkbox 2, checkbox 1, 3, 5 should hide</p>

当选中第一个或第二个复选框时，应实现问题中隐藏/显示某些复选框的要求。如果您有不同的标记（例如您提到的
行），则必须调整jQuery选择器以匹配


注意：对于较旧版本的jQuery，您需要使用不同的函数来确定是否选中了复选框-请参见
有趣的问题-这将是使用新的HTML5数据属性的好地方

看看这个，应该是非常自我解释的（）：

jQuery

$('input:checkbox','.checkbox_container').click(function() {
   var checked = $(this).prop('checked');
   $.each($(this).data("connect").toString().split(","), function(index, value) {
       var item = '#item'+value;
        (checked) ? $(item).fadeOut() : $(item).fadeIn();
    });
});

HTML

<div class='checkbox_container'>
    <p id='item1'><input type="checkbox" id='chk1' data-connect="2" /> <label for='chk1'>Chekcbox 1 (hide 2, 4)</label></p>
    <p id='item2'><input type="checkbox" id='chk2' data-connect="1" /> <label for='chk2'>Chekcbox 2 (hide 1)</label></p>
    <p id='item3'><input type="checkbox" id='chk3' data-connect="" /> <label for='chk3'>Checkbox 3 (Do nothing)</label></p>
    <p id='item4'><input type="checkbox" id='chk4' data-connect="3,5" /> <label for='chk4'>Chekcbox 4 (hide 3,5)</label></p>
    <p id='item5'><input type="checkbox" id='chk5' data-connect="" /> <label for='chk5'>Chekcbox 5 (Do nothing)</label></p>
</div>


复选框1（隐藏2,4）
复选框2（隐藏1）
复选框3（不执行任何操作）
复选框4（隐藏3,5）
勾选方框5（不执行任何操作）

快乐编码！
2,3,6,7复选框之间是否有任何共同点，以便我可以通过任何方式识别特定复选框？？任何原因您不能只应用多个类？因此您可以使用复选框3`class=“wpbook\u hidden wpbook\u option\u set\u 1 wpbook\u option\u set\u 2”？或者，如果同时选中1和2，这会不会不起作用，因为您希望它隐藏？您的标记有点奇怪谢谢！多个类是一个很好的解决方案，我会试试！来自PitHi@Nicola Peluchetti的问候您有点打字错误faedOut@Alex，事实上，我重写了我的答案！；）谢谢Nicola，我将继续使用“Genesis”中的多类解决方案和您的目标解决方案。这是一个很好的解决方案，因为不需要构建所有多类！谢谢！
$('input:checkbox','.checkbox_container').click(function() {
   var checked = $(this).prop('checked');
   $.each($(this).data("connect").toString().split(","), function(index, value) {
       var item = '#item'+value;
        (checked) ? $(item).fadeOut() : $(item).fadeIn();
    });
});

<div class='checkbox_container'>
    <p id='item1'><input type="checkbox" id='chk1' data-connect="2" /> <label for='chk1'>Chekcbox 1 (hide 2, 4)</label></p>
    <p id='item2'><input type="checkbox" id='chk2' data-connect="1" /> <label for='chk2'>Chekcbox 2 (hide 1)</label></p>
    <p id='item3'><input type="checkbox" id='chk3' data-connect="" /> <label for='chk3'>Checkbox 3 (Do nothing)</label></p>
    <p id='item4'><input type="checkbox" id='chk4' data-connect="3,5" /> <label for='chk4'>Chekcbox 4 (hide 3,5)</label></p>
    <p id='item5'><input type="checkbox" id='chk5' data-connect="" /> <label for='chk5'>Chekcbox 5 (Do nothing)</label></p>
</div>