Either Male or female checkbox selector

user_6046855 0
Viewed 464

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>

if-statement checkbox javascript
3 Answers

You need to know which checkbox call the function and you could handover the element for checking the actual element.

function myFunction(element) {
    var checkBox = document.getElementById("myCheck1");
    var checkBox2 = document.getElementById("myCheck2");
    var text = document.getElementById("text");
    var text2 = document.getElementById("text2");

    if (element === checkBox && checkBox.checked) {
        text.style.display = "block";
        text2.style.display = "none";
        checkBox2.checked = false;
        return;
    }
    if (element === checkBox2 && checkBox2.checked) {
        text2.style.display = "block";
        text.style.display = "none";
        checkBox.checked = false;
        return;
    }
    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(this)">
<input type="checkbox" id="myCheck2" onclick="myFunction(this)">
<p id="text" style="display:none">Checkbox is CHECKED! for male</p>
<p id="text2" style="display:none">Checkbox is CHECKED! for female</p>

A slightly different approach

function myFunction(element) {
    var boxes = [
            [document.getElementById("myCheck1"), document.getElementById("text")],
            [document.getElementById("myCheck2"), document.getElementById("text2")]
        ];

    if (element.checked) {
        boxes.forEach(([c, t]) => {
            if (element === c) {
                t.style.display = "block";
            } else {
                t.style.display = "none";
                c.checked = false;
            }
        });
        return;
    }
    boxes.forEach(([, t]) => t.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(this)">
<input type="checkbox" id="myCheck2" onclick="myFunction(this)">
<p id="text" style="display:none">Checkbox is CHECKED! for male</p>
<p id="text2" style="display:none">Checkbox is CHECKED! for female</p>

user_14476750

Not sure why you would use checkbox if only 1 option would be selected, can I suggest using radio inputs instead?

HTML

<form name="example-form" id="example-form">

  <div id="radio-buttons">
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label>
  </div>
  
  <div id="wrapper">
    <p id="text--male" class="text hidden">Selected male</p>
    <p id="text--female" class="text hidden">Selected female</p>
  </div>
  
</form>

Javascript

const form = document.getElementById('example-form');
const inputs = form.getElementsByTagName('input');
const texts = document.getElementsByClassName('text');

for(let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', function(evt) {
    toggleText(evt.target.value);
  })
}

function toggleText(tar) {
  for(let t = 0; t < texts.length; t++) {
    document.getElementsByClassName('text')[t].classList.add('hidden');
  }
  document.getElementById(`text--${tar}`).classList.remove('hidden')
}
user_146458290

Just wanted to show another, simple way of doing this. Since you have myCheck1 associated with text and myCheck2 associated with text2, I decided to rename text's id to text1. This way, instead of doing numerous if/elseif/else call's, I can control the associated element more easily with element.id.replace('myCheck', 'text'), etc..

Take a look, much simpler:

function myFunction(element) {
    document.getElementById("text1").style.display = "none";
    document.getElementById("text2").style.display = "none";

    if(element.checked != true) {
         return true;
    }

    document.getElementById("myCheck1").checked = false;
    document.getElementById("myCheck2").checked = false;

    document.getElementById(element.id).checked = true;
    document.getElementById(element.id.replace("myCheck", "text")).style.display = "block";
}
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck1" onclick="myFunction(this)">
<input type="checkbox" id="myCheck2" onclick="myFunction(this)">
<p id="text1" style="display:none">Checkbox is CHECKED! for male</p>
<p id="text2" style="display:none">Checkbox is CHECKED! for female</p>

This will make it very easy to add a third option: for other, for instance, which would make the above example more inclusive.

user_24305490
Related