Question

您好我想在选中复选框时显示div。事情是我有多个选择，我想显示表单，直到没有选择。我的代码没有完全正常工作，因为当我取消选中一个复选框时，我的div消失了，只有当没有被选中时它才会消失。

这是我的js

$('.checkbox').click(function() {
    if( $(this).is(':checked')) {
        $("#formular").show();
    } else {
        $("#formular").hide();
    }
});

也是jsfiddle http://jsfiddle.net/bYuak/

Answer 1

尝试

var $checks = $('.checkbox').click(function () {
    $("#formular").toggle($checks.filter(':checked').length>0);
});

演示：Fiddle

Answer 2

只要为您的任何复选框生成单击事件，就会调用您的代码，这是因为这行代码而发生的：

$('.checkbox').click()

在事件处理程序旁边，您说：

if( $(this).is(':checked')) {
    $("#formular").show();
}

如果取消选中该元素，则显示div，else语句隐藏div。因此，您的代码按预期工作。但是，您的实现与您希望它实现的完全不同。

你需要检查所有复选框的状态，使用循环，然后显示/隐藏#formular div，如果它们全部未选中。

Answer 3

我就是这样做的：

function checkCount() {
    // Store count of how many selected
    var boxCount = 0,
        el = $("#formular");

    // Go through each checkbox
    $(".checkbox").each(function (index) {
        //Increase count if checked
        if ($(this).is(':checked')) {
            boxCount++;
        }
    });

    if (boxCount > 0) {
        el.show();
    }
    else {
        el.hide();
    }
}

$('.checkbox').on('change', function () {
    checkCount();
});

Answer 4

当你检查时，它只是简单地定位所有复选框。

$('.checkbox').click(function() {
    if(  $('.checkbox').is(':checked')) {
        $("#formular").show();
    } else {
        $("#formular").hide();
    }
});

请参阅小提琴：http://jsfiddle.net/bYuak/2/

Answer 5

试试这个

$('.checkbox').click(function() {
    if($(".checkbox:checked").length){
        $("#formular").show();
    }
    else{
        $("#formular").hide();
    }
});

Fiddle

或

$('.checkbox').click(function() { 
    $("#formular").toggle($(".checkbox:checked").length>0);
});

Fiddle

Jquery在复选框上显示div

5 个答案: