通過文本複選框的複選框

Question

<script type="text/javascript"> 
    function ShowHideDiv(chkCat) { 
     var dvCat = document.getElementById("dvCat"); 
      dvCat.style.display = chkCat.checked ? "block" : "none"; 
    } 
</script> 

<label for="chkCat"> 
    <input type="checkbox" id="chkCat" onclick="ShowHideDiv(this)" /> Cat 
</label> 
<div id="dvCat" style="display: none"> 

<label> 
    <input type="checkbox" id="dvCat" onclick="ShowHideDiv(this)" /> British shorthair 
</label> 
<label> 
    <p id="British shorthair" ></p> 
</label> 

<script> 
    document.getElementById("dvCat").addEventListener("click", function(){ 
     document.getElementById("British shorthair").innerHTML = "RM00"; 
    }); 
</script> 
<label> 
    <input type="checkbox" id="chkCat" onclick="ShowHideDiv(this)" /> Exotic Shorthair 
</label> 

<p id="Exotic Shorthair"></p> 

<script> 
    document.getElementById("dvCat").addEventListener("click", function(){ 
     document.getElementById("Exotic Shorthair").innerHTML = "RM00"; 
    }); 
</script> 

1複選框。在這另外2選項複選框。選擇兩個複選框中的一個，這兩個選項的輸出同時出現。試着運行這個編碼。你能解決我的編碼問題嗎？

Answer 1

您現在可以通過爲複選框分配唯一的ID來解決此問題。

<script type="text/javascript"> 
 
    function ShowHideDiv(chkCat) { 
 
     var dvCat = document.getElementById("dvCat"); 
 
      dvCat.style.display = chkCat.checked ? "block" : "none"; 
 
    } 
 
</script> 
 

 
<label for="chkCat"> 
 
    <input type="checkbox" id="chkCat" onclick="ShowHideDiv(this)" /> Cat 
 
</label> 
 
<div id="dvCat" style="display: none"> 
 

 
<label> 
 
    <input type="checkbox" id="dvSubCat" /> British shorthair 
 
</label> 
 
<label> 
 
    <p id="British shorthair" ></p> 
 
</label> 
 

 
<script> 
 
    document.getElementById("dvSubCat").addEventListener("click", function(){ 
 
     document.getElementById("British shorthair").innerHTML = "RM00"; 
 
    }); 
 
</script> 
 
<label> 
 
    <input type="checkbox" id="chkSubCat" /> Exotic Shorthair 
 
</label> 
 

 
<p id="Exotic Shorthair"></p> 
 

 
<script> 
 
    document.getElementById("chkSubCat").addEventListener("click", function(){ 
 
     document.getElementById("Exotic Shorthair").innerHTML = "RM00"; 
 
    }); 
 
</script>

PS：分配id並不是最終的解決辦法，如果你有超過1個複選框，在相同的標準下降使用class names代替