JavaScript - 如果未选中复选框，则取消选中单选按钮

JavaScript - uncheck radio button if no checkboxes are checked

本文关键字：取消 单选按钮 复选框 JavaScript 如果      更新时间：2023-09-26

我已经在这里问了一个不同的问题：JavaScript - 如果选中任何复选框，则选择单选按钮

我有另一个问题，所以我正在为此创建一个新问题。我被告知也要这样做。因此，新问题。希望没事。

我能够填充单选按钮，Radio 1是否选中了组 1 和 2 中的任何 PD 复选框。同样，如果选中了组 1 和 2 中的任何 ID 复选框，我也能够填充单选按钮Radio 2。

以下是 HTML：

<form>
   <h3>Radio Buttons</h3>
   <input type="radio" name="radio1" id="radio1"> Radio 1
   <br>
   <input type="radio" name="radio2" id="radio2">Radio 2
   <br>
   <br>
   <h3>Checkbox Groups</h3>
   <h4><u>Group 1</u></h4>
   <p align="center"><u>PD</u></p>
   <ul>
      <li>
          <input id="pdcb" type="checkbox" name="G1PD1" onclick="validate()">G1 PD1</li>
      <li>
         <input id="pdcb" type="checkbox" name="G1PD2" onclick="validate()">G1 PD2</li>
   </ul>
   <p align="center"><u>ID</u></p>
   <ul>
      <li>
         <input id="idcb" type="checkbox" name="G1ID1" onclick="validate()">G1 ID1</li>
      <li>
         <input id="idcb" type="checkbox" name="G1ID2" onclick="validate()">G1 ID2</li>
   </ul>
   <h4><u>Group 2</u></h4>
   <p align="center"><u>PD</u></p>
   <ul>
      <li>
     <input id="pdcb" type="checkbox" name="G2PD1" onclick="validate()">G2 PD1</li>
      <li>
         <input id="pdcb" type="checkbox" name="G2PD2" onclick="validate()">G2 PD2</li>
   </ul>
   <p align="center"><u>ID</u></p>
   <ul>
       <li>
          <input id="idcb" type="checkbox" name="G2ID1" onclick="validate()">G2 ID1</li>
      <li>
          <input id="idcb" type="checkbox" name="G2ID2" onclick="validate()">G2 ID2</li>
   </ul>
</form>

以下是JS代码：

function validate()
{
var pdcbClass = document.getElementsById("pdcb");
var idcbClass = document.getElementsById("idcb");
console.log(this);
for (var i = 0; i < pdcbClass.length; i++) 
{
    if (pdcbClass[i].checked == true) 
    {
        document.getElementById("radio1").checked = true;
        document.getElementById("radio2").checked = false;
    }
}
for (var i = 0; i < idcbClass.length; i++) 
{
    if (idcbClass[i].checked == true) 
    {
        document.getElementById("radio1").checked = false;
        document.getElementById("radio2").checked = true;
    }
}
var pdcbClass2 = document.getElementsByClassName("pdcb");
var idcbClass2 = document.getElementsByClassName("idcb");
console.log(this);
//if none of the checkboxes are checked, don't populate radio buttons
for (var i = 0; i < pdcbClass2.length; i++) 
{
    if (pdcbClass2[i].checked == false) 
    {
        document.getElementById("radio1").checked = false;
        document.getElementById("radio2").checked = false;
    }
}
for (var i = 0; i < idcbClass2.length; i++) 
{
    if (idcbClass2[i].checked == false) 
    {
        document.getElementById("radio1").checked = false;
        document.getElementById("radio2").checked = false;
    }
}
}

现在，我的问题是，如果没有选中任何复选框，我将如何让单选按钮不被填充？

PS：我需要用纯JavaScript编写这个。我不能使用jQuery。

更新：我使用的复选框类型是以下形式：

<im:checkbox id="IDCB" name="abcXYZ" onclick="validate()" />

要选中多少复选框，您可以编写：

var hmchkObj = [].slice.call(document.querySelectorAll('form input[type="checkbox"]')).filter(function(element, index) {
  return element.checked == true;
}).length;

要选中可在 querySelectorAll 中使用的所有输入复选框，请执行以下操作：

document.querySelectorAll('form input[type="checkbox"]')

这将重新调整 NodeList，因此您需要转换为数组才能使用过滤器函数。在过滤的元素（选中 == true 的元素）上，您可以使用数组属性长度。如果此值为 0，则表示未选中任何复选框。

相关文章：