Question

我正在尝试在选中相关复选框时隐藏div。

为了让它与复选框的初始jstate一起使用，我添加了triggerHandler（'click'）。

这适用于第一个复选框，但不适用于任何其他复选框。

有什么建议吗？

非常感谢。

HTML

1<input type = "checkbox" id = "1" checked>
2<input type = "checkbox" id = "2" >
3<input type = "checkbox" id = "3" checked>

<div class = "1">
  //Contains 1 elements remove when checked
</div>

<div class = "2">
  //Contains 2 elements remove when checked
</div>

<div class = "3">
  //Contains 3 elements remove when checked
</div>

Jquery的

$(document).ready(function() {

$("input[type=checkbox]").click(function()

{
    divId = $(this).attr("id");

    if ($(this).is(":checked")) {
        $("." + divId).hide();
    }
    else if ($(this).not(":checked")) {
        $("." + divId).show();
    }

}).triggerHandler('click');

});

Answer 1

首先，你不应该做else if部分。否则就会这样做。

第二，我会尝试在同一个选择器上调用click函数。请尝试以下代码：

$(document).ready(function() {

    $("input[type=checkbox]").change(function()
    {
        var divId = $(this).attr("id");

        if ($(this).is(":checked")) {
            $("." + divId).hide();
        }
        else{
            $("." + divId).show();
        }

    });
    $("input[type=checkbox]").change();

});

编辑：尝试使用更改事件。 See this example.

Answer 2

您需要在加载页面时执行代码，以及发生单击事件时，请尝试以下操作：

$("input[type=checkbox]")
    .each(setDivs) // on load
    .change(setDivs); // on click

function setDivs() {
    divId = $(this).attr("id");

    if ($(this).is(":checked")) {
        $("." + divId).hide();
    }
    else {
        $("." + divId).show();
    }
}

您还会注意到我如何将else if条款修改为else，并将click事件更改为change以允许用户选择使用的选项他们的键盘也是。

Example fiddle

Answer 3

自由修改你的代码。

$(document).ready(function() {
    function toggleDiv() {
        var $this = $(this);
        $("." + $this.attr('id'))[$this.is(':checked') ? 'hide' : 'show']();
    }
    $('input:checkbox').each(toggleDiv).click(toggleDiv);
});

http://jsfiddle.net/tb5Yt/123/

Jquery：使用复选框检查初始状态设置div hide / show

3 个答案: