在點擊複選框時顯示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

回答

相關問題