单击复选框时显示 div答案

【问题标题】：show div on when checkboxes are clicked单击复选框时显示 div
【发布时间】：2014-01-12 06:22:46
【问题描述】：

因此，当单击多个复选框之一并且它正在工作时，我试图显示一个 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>

【问题讨论】：

id fldcheckbox 在您的 html 中不是唯一的。

标签： javascript html checkbox

【解决方案1】：

使用change 事件而不是click。

【讨论】：

【解决方案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

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

【讨论】：

谢谢，太完美了！

【解决方案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>

【讨论】：