lundi 16 novembre 2020

Either Male or female checkbox selector

Only one will be selected. It properly works when I first select female. Actually I want to implement that if I select male than female will automatically uncheck again if I check female male will automatically uncheck

    <p>Display some text when the checkbox is checked:</p>


<label for="myCheck">Checkbox:</label> 
<input type="checkbox" id="myCheck1" onclick="myFunction()">
<input type="checkbox" id="myCheck2" onclick="myFunction()">




<p id="text" style="display:none">Checkbox is CHECKED! for male</p>
<p id="text2" style="display:none">Checkbox is CHECKED! for female</p>

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck1");
  var checkBox2 = document.getElementById("myCheck2");
  var text = document.getElementById("text");
  var text2 = document.getElementById("text2");
  
  if (checkBox.checked == true){
    text.style.display = "block";
    text2.style.display = "none";
    checkBox2.checked=false;
    

  } else if(checkBox2.checked == true) {
     text2.style.display = "block";
     text.style.display = "none";
    checkBox.checked=false;
     
  }
  
  
  else{
      text.style.display = "none";
       text2.style.display = "none";
      
  }
}
</script>

Aucun commentaire:

Enregistrer un commentaire