Question

因此，当我点击多个复选框中的一个并且它正在工作时，我试图显示一个div但是当你取消选中一个复选框时，即使仍然点击了复选框，它也会隐藏div。我似乎无法弄清楚如何只在没有点击复选框时隐藏div。

<input type="checkbox" name="list[]" value="1" id="fldcheckbox" onclick="fnchecked(this.checked);">

<input type="checkbox" name="list[]" value="2" id="fldcheckbox" onclick="fnchecked(this.checked);">

<input type="checkbox" name="list[]" value="3" id="fldcheckbox" onclick="fnchecked(this.checked);">

<div id="ref_options" style="display:none;">
example
</div>

<script>
function fnchecked(blnchecked)
{
if(blnchecked)
{
document.getElementById("ref_options").style.display = "";
}else{
document.getElementById("ref_options").style.display = "none";
}

}
</script>

Answer 1

使用change事件代替click。

Answer 2

实际上，您正在根据每个复选框的选中值隐藏/显示div。如果只取消选中一个复选框，则变量blnchecked将变为false，这会使div不可见。

你可能想要这个

function fnchecked(blnchecked) {
    var checkboxs = document.getElementsByName("list[]");
    var ischecked = false;
    for (var i = 0, l = checkboxs.length; i < l; i++) {
        if (checkboxs[i].checked) {
            ischecked = true;
        }
    }

    if (ischecked) {
        document.getElementById("ref_options").style.display = "block";
    } else {
        document.getElementById("ref_options").style.display = "none";
    }

Js Fiddle Demo

您可以删除函数参数，因为函数内部没有使用它。

Answer 3

请参阅 DEMO

HTML：

<input type="checkbox" name="list[]" value="1" id="fldcheckbox" onclick="fnchecked(this.checked?++c:--c);">

java脚本：

<script>
var c=0;
function fnchecked(c){
  if(c>0){
    document.getElementById("ref_options").style.display = "";
  }else{
    document.getElementById("ref_options").style.display = "none";
  }    
}
</script>

单击复选框时显示div

3 个答案: