mercredi 24 mai 2017

How to make what ever checkbox user tick, one of the checkbox permanent it will come out the same text whatever checkbox user tick?

How to make what ever checkbox user tick, one of the checkbox permanent it will come out the same text. Example like if user tick a and c or a, b, c it will come out "kiv speacial" because if c already tick the other checkbox tick with c the text are same. Rather than what I am doing right now there too much possibility like a and b, a and c, b and c, b and d and so on. My coding as below:

<script>
    function fungsi() {

      var a = document.getElementById("subAnimal1").checked;
      var b = document.getElementById("subAnimal2").checked;
      var c = document.getElementById("subAnimal3").checked;
          
          if (a && b && c) {
        document.getElementById("subAnimalLabel").innerHTML = "kiv1";
      } else if (a && b) {
        document.getElementById("subAnimalLabel").innerHTML = "kiv2";
      } else if (a && c) {
        document.getElementById("subAnimalLabel").innerHTML = "kiv special";
          } else {
        alert("In progress!");
          }
    }
</script>
  
<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>
        
<div id="subAnimal" style="display: none">

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

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

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

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



Aucun commentaire:

Enregistrer un commentaire