代码之家 › 专栏 › 技术社区 › severthy 007

显示特定文本的html脚本复选框条件

checkbox if-statement html javascript

severthy 007 · 技术社区 · 2 年前

嗨,我需要代码方面的帮助,所以基本上我正在做一个项目,当你选中复选框时,它会显示一个文本结果。我可以创建一个if-else条件,但我遇到了一个问题,如果选中了所有复选框,它将显示所有文本。这是我的代码

<!DOCTYPE html>
<html>
<body>

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

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

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

<p id="text" style="display:none"> both</p>
<p id="text2" style="display:none">ch1!</p>
<p id="text3" style="display:none">ch2!</p>

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  
    /*should only show text "both"*/
  if (checkBox.checked == true && myCheck1.checked == true){
      text.style.display = "block";
    
  } else {
     text.style.display = "none";
     
  }
 /* show text "ch1"*/
   if (myCheck.checked == true){
  text2.style.display = "block";


     
  } else {
     text2.style.display = "none";
     
  }
  /* show text "ch2"*/
    if (myCheck1.checked == true){
    text3.style.display = "block";
    
  } else {
     text3.style.display = "none";
  }
}

</script>
</body>
</html>

我试着用这样的方式隐藏其他文本

if (checkBox.checked == true && myCheck1.checked == true){
      text.style.display = "block";
      text2.style.display = "none";
      text3.style.display = "none";


  } else {
     text.style.display = "none";

但还是没用,我真的需要帮助,谢谢。

2 回复 | 直到 2 年前

Ray Wallace 2 年前

首先隐藏这三个选项,然后根据需要启用它们。请参阅代码片段:

function myFunction() {
  var checkBox = document.getElementById("myCheck");

  text.style.display = "none";
  text2.style.display = "none";
  text3.style.display = "none";

  /*should only show text "both"*/
  if (checkBox.checked == true && myCheck1.checked == true){
    text.style.display = "block";
  }
  /* show text "ch1"*/
  else if (myCheck.checked == true){
    text2.style.display = "block";
  }
  /* show text "ch2"*/
  else if (myCheck1.checked == true){
    text3.style.display = "block";
  }
}

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

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

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

      <p id="text" style="display:none"> both</p>
      <p id="text2" style="display:none">ch1!</p>
      <p id="text3" style="display:none">ch2!</p>

moon 2 年前

最好的答案由@Ray Wallace提供,我的答案不容易理解,你可以试试。

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

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

    <label for="myCheck">Checkbox2:</label>
    <input type="checkbox" id="myCheck1" onclick="myFunction(text3,myCheck1)">

    <p id="text" style="display:none"> both</p>
    <p id="text2" style="display:none">ch1!</p>
    <p id="text3" style="display:none">ch2!</p>

    <script>
      function myFunction(el, checkbox) {
        if (text.style.display === "block") {
          text.style.display = "none";
          text2.style.display = "block";
          text3.style.display = "block";
        }
        el.style.display = checkbox.checked ? "block" : "none";
        /*should only show text "both"*/
        if (myCheck.checked && myCheck1.checked) {
          text.style.display = "block";
          text2.style.display = "none";
          text3.style.display = "none";
        }
      }
    </script>