wani wani - 1 year ago 31
HTML Question

Why my Checkbox change to text

Why my checkbox change to text?

How to make it we tick whatever checkbox the result change? Can anyone fix my coding? In addition, I want my checkbox more tidy. I don't want it so close with each other checkbox.



<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>
<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>

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




Answer Source

In Both id is duplicate so try below code

<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>
	  <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>

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download