Question

我有六个复选框。

如图所示

Checkbox1 <input type="checkbox" id="check1">

Checkbox2 <input type="checkbox" id="check2">

<div id="checkbox1field" {if $blabla} style="display="none"{/if}> 
Checkbox1 <input type="checkbox" id="check3">
Checkbox2 <input type="checkbox" id="check4">
</div>

<div id="checkbox2field" {if $blabla2} style="display="none"{/if}>
Checkbox1 <input type="checkbox" id="check5">
Checkbox2 <input type="checkbox" id="check6">
</div>

现在，如果我点击id=check1复选框，则id=checkbox1field的元素应显示display="none"。

如果我点击id="check3"，id="check4"应隐藏。

如果我点击id="check4"，id="check3"应隐藏。

同样的过程对id="checkbox2field"也有效。

但我的问题是如果用户点击

我该怎么办

id="check2" and id="check1"

然后我想要显示id="checkbox2field"和id="checkbox1field"。

我所做的工作50％就在这里

$("#check1:checked").show("fast").("#check4").show("fast").("#checkbox2field").hide("fast");
$("#check2:checked").show("fast").("#check1").hide("fast").("#checkbox1field").show("fast");

如何使用jquery解决此问题？

Answer 1

尝试在一个庞大的jQuery链中完成所有操作注定会比它的价值更令人困惑。

这是一个简单直接的方法：

if ($('#check1').is(':checked')) {
    if ($('#check2').is(':checked')) {
        $('#checkbox1field').show('fast');
        $('#checkbox2field').show('fast');
    } else {
        $('#checkbox1field').hide('fast');
    }
} else if ($('#check2').is(':checked')) {
    $('#checkbox2field').hide('fast');
}

Answer 2

$('#check1,#check2').bind('change', function () {
    var self = $(this);

    $('#' + self.attr('id') + 'field').toggle(self.attr('checked')).children(':checkbox').show();
});

$('#check3,#check4,#check5,#check6').bind('change', function () {
    var self = $(this);

    self.siblings(':checkbox').toggle(self.attr('checked'));
});

您可能希望将类应用于复选框，以便更轻松地进行选择。

多个Checkbox，检查是否同时检查Jquery

2 个答案: