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

    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";
          
      }
    }
        <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>
    



Aucun commentaire:

Enregistrer un commentaire