javascript - 男性或女性复选框选择器

Question

只会选择一个。当我第一次选择女性时它可以正常工作。 其实我想实现的是，如果我选择男性而不是女性，则会自动取消选中，如果我选中女性，男性将自动取消选中

    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>
    

Answer 1

您需要知道哪个复选框调用该函数，然后您可以移交该元素以检查实际元素。

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>

稍微不同的方法

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>