通过选中/取消选中一个复选框来选中/取消选中多个复选框答案

【问题标题】：Check/Uncheck mutiple checkboxes by checking/Unchecking one checkbox通过选中/取消选中一个复选框来选中/取消选中多个复选框
【发布时间】：2019-09-13 06:29:37
【问题描述】：

您好，我知道我的问题标题令人困惑，但我会尝试在这里解释所有内容。请先看我的代码：

<!DOCTYPE HTML>
    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

        </head>

        <body>
            <input type="checkbox" class="check" id="firstCheck" onclick="myFunction();"> First<br>
            <input type="checkbox" class="check" id="secondCheck" onclick="myFunction1();"> Second <br>
            <input type="checkbox" id="new"> A <br>
            <input type="checkbox" id="new1"> B <br>

        </body>
        <script>
            function myFunction() {
            var checkBox = document.getElementById("firstCheck");
  //var text = document.getElementById("text");
            if (checkBox.checked == true){
    //text.style.display = "block";
            document.getElementById("new").checked = true;

    } 
            else if (checkBox.checked == false){
            document.getElementById("new").checked = false;
    }
            else {
            text.style.display = "none";
    }

}

function myFunction1(){
  var checkBox = document.getElementById("secondCheck");
  //var text = document.getElementById("text");
  if (checkBox.checked == true){
    //text.style.display = "block";
    document.getElementById("new1").checked = true;
  } 
  else if (checkBox.checked == false){
  document.getElementById("new1").checked = false;
  }
  else {
     text.style.display = "none";
  }
}
        </script>

        <script>
$(document).ready(function(){
    $('.check').click(function() {
        $('.check').not(this).prop('checked', false);
    });
});
</script>
    </html>

我在这里做的是，当我选择/取消选择复选框时，首先它会自动选择/取消选择复选框 A，类似地，当我选择/取消选择复选框第二个时，它会自动选择/取消选择复选框 B。我使用了代码，以便第一个或第二个复选框将一次被选中，而不是两者都被选中。因此，当我选择复选框 First 时，它会选择复选框 A，而当我选择复选框 Second 而没有取消选中 First 时，则会同时选择 A 和 B。当我再次选择 First 而没有取消选择 Second 时，A 和 B 都保持选中状态。这不是我想要的。我希望当有人选中 First 然后 A 应该被选中，这就是现在发生的情况，但是当有人选中 Second 时，A 的复选框本身应该被取消选中，就像复选框 first 没有被选中一样。我想让它像这种形式： [网址：]https://www.swiftcomarine.com.au/BOAT-PACKAGE-SPECIALS-X15.html

您可以在网站的右侧看到，当有人检查标准包时，它会自动选择的某些复选框以及查找保费包后，自动选择其他复选框，并将先前未选中的复选框自动选择。这就是我想要的形式。请在这方面帮助我。谢谢

【问题讨论】：

你的代码还没有这样做jsfiddle.net/9q3Lu8ko ?
不，它没有做我想做的事。目前它正在这样做：当第一次选择它时选择A，当我们选择第二次时它选择B而不取消选择A。我想要的是当有人在选择第一后选择第二次时它应该取消选择A。我能解释清楚吗？

标签： javascript jquery checkbox

【解决方案1】：

这是适合您的要求的小提琴。

https://jsfiddle.net/y5tkphmr/2/

我为复选框 A 和 B 添加了一个类。我添加了一个名为 resetCheckBoxes 的函数，该函数将通过在您的函数 1 和函数 2 之前调用此方法来取消选中复选框。

 <script>


  function resetCheckBoxes(){
       $(".reset").prop('checked', false);
  }
  function myFunction() {
  resetCheckBoxes();
  var checkBox = document.getElementById("firstCheck");
  //var text = document.getElementById("text");
  if (checkBox.checked == true) {
    //text.style.display = "block";
    document.getElementById("new").checked = true;

  } else if (checkBox.checked == false) {
    document.getElementById("new").checked = false;
  } else {
    text.style.display = "none";
  }

}

function myFunction1() {
resetCheckBoxes();
  var checkBox = document.getElementById("secondCheck");
  //var text = document.getElementById("text");
  if (checkBox.checked == true) {
    //text.style.display = "block";
    document.getElementById("new1").checked = true;
  } else if (checkBox.checked == false) {
    document.getElementById("new1").checked = false;
  } else {
    text.style.display = "none";
  }
}


$(document).ready(function() {
  $('.check').click(function() {
    $('.check').not(this).prop('checked', false);
  });
});

  </script>

【讨论】：

您好，谢谢您的回答。我想把它放在wordpress中。请告诉我如何在 wordpress 中放置自定义表单。
对不起，我之前没有在wordpress工作过。我忍不住。 @ans11

【解决方案2】：

来自 Carsten Løvbo Andersen js fiddle 链接添加第 13 行和第 29 行分别是：

document.getElementById("new1").checked = false;

document.getElementById("new").checked = false;

【讨论】：

感谢您的回答也对我有用，但我接受 Kamal 的回答，因为他是在功能的帮助下做到这一点的，而且我有很多复选框，这就是为什么最适合我的原因。但也感谢我的帮助。我赞成你的回答。我想问你一件事，我想通过 wordpress 中的自定义编码来放置我的表单。如何在自定义编码的帮助下将表单添加到 wordpress。