2017-05-23 6 views
0

私のチェックボックスがテキストに変わるのはなぜですか?なぜ私のチェックボックスがテキストに変わる

どのようにチェックボックスをチェックして結果が変わるようにするか?誰も私のコーディングを修正できますか?さらに、私は自分のチェックボックスをもっときれいにしたい。私はそれを他のチェックボックスと密接にしたくない。

<head> 
 
    <script> 
 
    function fungsi() { 
 

 
     var a = document.getElementById("subAnimal1").checked; 
 
     var b = document.getElementById("subAnimal2").checked; 
 
     var c = document.getElementById("subAnimal3").checked; 
 
     var d = document.getElementById("subAnimal4").checked; 
 
     var e = document.getElementById("subAnimal5").checked; 
 

 
     if (a && b && c && d && e) { 
 
     document.getElementById("subAnimal").innerHTML = "kiv1"; 
 
     } else if (a && b) { 
 
     document.getElementById("subAnimal").innerHTML = "kiv2"; 
 
     } else if (b && a && c) { 
 
     document.getElementById("subAnimal").innerHTML = "kiv13"; 
 
     } else if (a) { 
 
     document.getElementById("subAnimal").innerHTML = "kiv4"; 
 
     } else { 
 
     alert("In progress!"); 
 
     } 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <script type="text/javascript"> 
 
     function ShowHideDiv(Animal) { 
 
     var subAnimal = document.getElementById("subAnimal"); 
 
     subAnimal.style.display = Animal.checked ? "block" : "none"; 
 
     console.log(Animal.value) 
 
     console.log("Text Inside LABEL:" + Animal.parentNode.textContent) 
 
     } 
 
    </script> 
 

 
    <label for="Animal"> 
 
    <input type="checkbox" id="Animal" onclick="ShowHideDiv(this)" value="Animal"/> Animal 
 
</label> 
 

 
<form> 
 
<div id="subAnimal" style="display: none"> 
 

 
    <label> 
 
    <input type="checkbox" id="subAnimal1" onclick="fungsi()"/>123 
 
    </label> 
 

 

 
    <label> 
 
\t <input type="checkbox" id="subAnimal2" onclick="fungsi()"/>456 
 
    </label> 
 

 

 
    <label> 
 
\t <input type="checkbox" id="subAnimal3" onclick="fungsi()"/>789 
 
    </label> 
 

 
    <label> 
 
    <input type="checkbox" id="subAnimal4" onclick="fungsi()"/>101112 
 
    </label> 
 

 
    <label> 
 
\t <input type="checkbox" id="subAnimal5" onclick="fungsi()"/>KIV 
 
    </label> 
 

 
<p id="subAnimal"></p>

答えて

0

そうコード

<head> 
 
    <script> 
 
    function fungsi() { 
 

 
     var a = document.getElementById("subAnimal1").checked; 
 
     var b = document.getElementById("subAnimal2").checked; 
 
     var c = document.getElementById("subAnimal3").checked; 
 
     var d = document.getElementById("subAnimal4").checked; 
 
     var e = document.getElementById("subAnimal5").checked; 
 

 
     if (a && b && c && d && e) { 
 
     document.getElementById("subAnimalLabel").innerHTML = "kiv1"; 
 
     } else if (a && b) { 
 
     document.getElementById("subAnimalLabel").innerHTML = "kiv2"; 
 
     } else if (b && a && c) { 
 
     document.getElementById("subAnimalLabel").innerHTML = "kiv13"; 
 
     } else if (a) { 
 
     document.getElementById("subAnimalLabel").innerHTML = "kiv4"; 
 
     } else { 
 
     alert("In progress!"); 
 
     } 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <script type="text/javascript"> 
 
     function ShowHideDiv(Animal) { 
 
     var subAnimal = document.getElementById("subAnimal"); 
 
     subAnimal.style.display = Animal.checked ? "block" : "none"; 
 
     console.log(Animal.value) 
 
     console.log("Text Inside LABEL:" + Animal.parentNode.textContent) 
 
     } 
 
    </script> 
 

 
    <label for="Animal"> 
 
    <input type="checkbox" id="Animal" onclick="ShowHideDiv(this)" value="Animal"/> Animal 
 
</label> 
 

 
<form> 
 
<div id="subAnimal" style="display: none"> 
 

 
    <label> 
 
    <input type="checkbox" id="subAnimal1" onclick="fungsi()"/>123 
 
    </label> 
 

 

 
    <label> 
 
\t <input type="checkbox" id="subAnimal2" onclick="fungsi()"/>456 
 
    </label> 
 

 

 
    <label> 
 
\t <input type="checkbox" id="subAnimal3" onclick="fungsi()"/>789 
 
    </label> 
 

 
    <label> 
 
    <input type="checkbox" id="subAnimal4" onclick="fungsi()"/>101112 
 
    </label> 
 

 
    <label> 
 
\t <input type="checkbox" id="subAnimal5" onclick="fungsi()"/>KIV 
 
    </label> 
 

 
<p id="subAnimalLabel"></p>

下回っ試みる重複して
1

あなたは、ページ内の重複したID subAnimalを持っています。ここで

<div id="subAnimal" style="display: none"> 
... 
<p id="subAnimal"></p> 

は、変更されたバージョンである:両方のIDで

<head> 
<script> 
function fungsi() { 

    var a = document.getElementById("subAnimal1").checked; 
    var b = document.getElementById("subAnimal2").checked; 
    var c = document.getElementById("subAnimal3").checked; 
    var d = document.getElementById("subAnimal4").checked; 
    var e = document.getElementById("subAnimal5").checked; 

    if (a && b && c && d && e) { 
    document.getElementById("subAnimalx").innerHTML = "kiv1"; 
    } else if (a && b) { 
    document.getElementById("subAnimalx").innerHTML = "kiv2"; 
    } else if (b && a && c) { 
    document.getElementById("subAnimalx").innerHTML = "kiv13"; 
    } else if (a) { 
    document.getElementById("subAnimalx").innerHTML = "kiv4"; 
    } else { 
    alert("In progress!"); 
    } 
} 
</script> 
</head> 

<body> 

<script type="text/javascript"> 
    function ShowHideDiv(Animal) { 
    var subAnimal = document.getElementById("subAnimal"); 
    subAnimal.style.display = Animal.checked ? "block" : "none"; 
    console.log(Animal.value) 
    console.log("Text Inside LABEL:" + Animal.parentNode.textContent) 
    } 
</script> 

<label for="Animal"> 
<input type="checkbox" id="Animal" onClick="ShowHideDiv(this)" value="Animal"/> Animal 
</label> 

<form> 
<div id="subAnimal" style="display: none"> 

<label> 
<input type="checkbox" id="subAnimal1" onclick="fungsi()"/>123 
</label> 


<label> 
    <input type="checkbox" id="subAnimal2" onclick="fungsi()"/>456 
</label> 


<label> 
    <input type="checkbox" id="subAnimal3" onclick="fungsi()"/>789 
</label> 

<label> 
<input type="checkbox" id="subAnimal4" onclick="fungsi()"/>101112 
</label> 

<label> 
    <input type="checkbox" id="subAnimal5" onclick="fungsi()"/>KIV 
</label> 
</form> 

<p id="subAnimalx"></p> 
関連する問題