Question

我正在尝试隐藏复选框，具体取决于点击另一个复选框，它正在为一行工作，但我希望它有多行

（例如）

如果我单击复选框1，复选框2,3,6和7应该隐藏如果我单击复选框2，复选框1,3,5应隐藏

- 编辑： - ）

再次问好，

非常感谢所有的帮助，最后它正在使用多个类和event.target

查看http://jsfiddle.net/MH8e4/163/

- 上次编辑:-) 我将使用Muleskinner的解决方案，因为它不需要构建不同的类，而且动态表单更容易。如果隐藏复选框

，我会添加删除已检查属性的内容

http://jsfiddle.net/QEG5a/7/

Answer 1

有趣的问题 - 这是使用新的HTML5数据属性的好地方。

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

<强>的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>

快乐的编码！

Answer 2

您可以这样做（但我认为您的标记可能更好）使用event.target来检查选中/取消选中的复选框：

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

在这里摆弄：http://jsfiddle.net/nicolapeluchetti/MH8e4/152/

Answer 3

希望有所帮助

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);
        }
    }
})

HTML：

<p><input type="checkbox" id="set_1">checkbox 1</p>
<p><input type="checkbox" id="set_2">checkbox 2</p>
<p><input type="checkbox" id="set_3">checkbox 3</p>
<p><input type="checkbox" id="set_4">checkbox 4</p>
<p><input type="checkbox" id="set_5">checkbox 5</p>
<p><input type="checkbox" id="set_6">checkbox 6</p>
<p><input type="checkbox" id="set_7">checkbox 7</p>

http://jsfiddle.net/WFXun/

Answer 4

对于这个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 1.6+（用于.prop('checked')部分）JavaScript ...

var hideMap = { "1" : [2, 3, 6, 7], "2" : [1, 3, 5] };

$('div input:checkbox').click(function() {
    var parent = $(this).closest('div');
    var hideIndex = parent.find('input').index(this) + 1 + "";

    if (hideMap[hideIndex]) {
        if(!$(this).prop('checked')) {
            parent.find('label').fadeIn();
        } else {
            $.each(hideMap[hideIndex], function(index, value) {
                parent.find('label:eq(' + (value - 1) + ')').fadeOut();
            });
        }
    }
});

当第一个或第二个复选框为checked时，

应实现隐藏/显示某些复选框的问题中的要求。如果你有不同的标记（例如你提到<table>行），那么你将不得不调整jQuery选择器来匹配。

Demo

注意：对于旧版本的jQuery，您需要使用其他函数来确定是否选中了复选框 - 请参阅Setting "checked" for a checkbox with jQuery?

jQuery隐藏表行，具体取决于复选框单击

4 个答案: