在点击复选框时显示div

所以即时尝试显示一个div时，多个复选框之一被点击，它正在工作，但是当你点击一个复选框时，即使点击复选框仍然隐藏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>

来源

2014-01-11 user2777747

的ID'fldcheckbox'是不是在你的HTML独特。 – Arjan

其实你基于每个复选框的选中值隐藏/显示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

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

来源

2014-01-11 22:17:24 Sachin

非常感谢！ – user2777747

使用change事件而不是click。

来源

2014-01-11 22:14:41 Pinal

看到这个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>

来源

2014-01-11 22:22:46 mehdi

在点击复选框时显示div

回答

相关问题