2017-05-16 4 views
0
<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 checkbox. Unter diesem anderen 2 Optionen Kontrollkästchen. Wählen Sie eines der beiden Kontrollkästchen aus, um die Ausgabe beider Optionen gleichzeitig auszuführen. Versuchen Sie, diese Codierung auszuführen. Kannst du meine Programmierung reparieren?checkbox nach checkbox durch text

+0

Sie haben zwei Kästchen mit dem gleichen 'id = > chkCat'. –

+0

danke für die Korrektur meiner Kodierung. Ich bin immer noch neu in HTML. Wenn ich nicht zwei Checkboxen verwende, wie muss ich anrufen? Ich möchte es so, als meine erste Checkbox ankreuzen war, wird eine andere Option zwei Checkbox, und wenn Sie eines der beiden Kontrollkästchen klicken, wird ein weiterer Text kam heraus. Das Problem ist, dass der Text aus zwei Kontrollkästchen gleichzeitig herauskam. Was ist falsch mit meiner Codierung? – wani

Antwort

0

Sie können es vorläufig beheben, indem Sie den Checkboxen eindeutige ID zuweisen.

<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: Zuordnung id ist nicht die ultimative Lösung, wenn Sie mehr als 1 Checkbox in gleichen Kriterien fallen haben verwenden class names statt

+0

Ich denke, ich verstehe es. Danke noch einmal! – wani

+0

Wenn es Ihrem Problem dient, markieren Sie es bitte als Antwort. –