Question

我正在使用表单中的复选框。但是当选中一个复选框时，显示详细信息div。当多重检查没有用jquery显示div时。

HTML code：

<input type="checkbox" name="cb1" id="cb1" />
<input type="checkbox" name="cb2" id="cb2" />
<input type="checkbox" name="cb3" id="cb3" />
<input type="checkbox" name="cb4" id="cb4" />
<div id="detail" style="display:none"></div>

Answer 1

这是你怎么做的。希望有所帮助。

<input type="checkbox" name="cb1" id="cb1" />
<input type="checkbox" name="cb2" id="cb2" />
<input type="checkbox" name="cb3" id="cb3" />
<input type="checkbox" name="cb4" id="cb4" />
<div id="detail" style="display:none">Box.</div>

使用Javascript：

<script>
    var count = 0;
    $('input[type="checkbox"]').click(function() {
        count = $('input[type="checkbox"]:checked').length;

        if (count == 1) {
            $('#detail').show();
        } else {
            $('#detail').hide();
        }
    });
</script>

Answer 2

检查代码：

注意：替换jquery库路径

<html>
<head>
<title>Demo</title>
<script src="js/jquery.min.js"></script>
<script>
    function checkIt(sender) {
        if ($(".checkme:checked").length == 1) {
            $("#detail").css({
                display:"block"
            });
        }
        else {
            $("#detail").css({
                display: "none"
            });
        }
    }
</script>
</head>
<body>
<input type="checkbox" name="cb1" id="cb1" class="checkme" onchange="checkIt(this);"/>
<input type="checkbox" name="cb2" id="cb2" class="checkme"  onchange="checkIt(this);" />
<input type="checkbox" name="cb3" id="cb3" class="checkme"  onchange="checkIt(this);" />
<input type="checkbox" name="cb4" id="cb4" class="checkme"  onchange="checkIt(this);"/>
<div id="detail" style="display: none">I am Here</div>
</body>
</html>

Answer 3

如果我理解正确，我认为你只需要选中1个复选框就可以显示div，而在其他情况下它应该被隐藏？如果是这样，试试这个..

$("input[type='checkbox']").on('click',function(){
    var c=0;
    $("input[type='checkbox']").each(function(){                
        if($(this).is(":checked"))
          c++;
     });

   (c==1) ? $("#detail").show() : $("#detail").hide();
});

一个选中或多个选中复选框

3 个答案: