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>

P.S：分配id不是最终的解决方案，如果您有超过1个复选框符合相同条件而使用class names而不是

复选框按文本复选框

1 个答案: