Question

我从PHP脚本生成了多个复选框。

<input type="checkbox" class="checkbox" name="item[]" value="1" />

<input type="checkbox" class="checkbox" name="item[]" value="2" />

<input type="checkbox" class="checkbox" name="item[]" value="3" />

<input type="checkbox" class="checkbox" name="item[]" value="4" />

现在，一旦复选框被选中 - 我想显示一个div，其中包含“删除所选项”等选项。但是，在取消选中所有复选框后，DIV应该再次消失。我有以下代码，但它不会隐藏DIV。

    $(".checkbox").live('click', function () {

        countChecked () ;

        if (countChecked() == "1" ) {

            $("div#options").fadeOut("medium") ;

        } else {

            if ( $("div#options").is(":hidden") ) {

                $("div#options").fadeIn ( "medium" ) ;

            }

        }

    });

此外，“countChecked”功能如下所示。

    function countChecked() {

        var n = $("input.checkbox:checked").length;

    }

Answer 1

您的函数应返回值：

function countChecked() {
    return $("input.checkbox:checked").length;
}

并且您想要检查金额是否 0 ，您也可以删除重复调用countChecked

$(".checkbox").live('click', function () {
    if (countChecked() == 0 ) {

Answer 2

在你的countChecked() - 函数中，使用return语句..

 function countChecked() {

        var n = $("input.checkbox:checked").length;
        return n;

    }

并点击复选框...

 $(".checkbox").live('click', function () {

        if (countChecked() == 0 ) {

            $("div#options").fadeOut("medium") ;

        } else {

            if ( $("div#options").is(":hidden") ) {

                $("div#options").fadeIn ( "medium" ) ;

            }

        }

    });

Answer 3

您可以使用

$('.checkbox').live('click',function(){
    // if you just checked the current one, no need to check the rest
    if (this.checked)
    {
      $('#options').fadeIn('medium');
    }
    else // if you just unchecked
    {
        if ( !$('.checkbox:checked').length ) // check the whole group
        {
            $('#options').fadeOut('medium');
        }
    }
});

演示 http://jsfiddle.net/gaby/wZWbS/

Answer 4

工作：http://jsfiddle.net/NkkJF/

Answer 5

另一个版本，具有微小的优化：http://jsfiddle.net/Briganti/XNWEP/

玩得开心：）

jQuery +多个复选框：在选中时显示div，在取消选中时隐藏

5 个答案: