JavaScript - 如果选中任何复选框，则选择单选按钮

Question

我正在尝试编写 JavaScript 代码，如果选中了复选框，则应填充单选按钮。

以下是 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>

这就是我希望 JavaScript 执行的操作:如果选中任何 PD 复选框，则应选中单选按钮 Radio 1。如果没有选择任何 PD 复选框，则应选择单选按钮 Radio 2。同样，如果没有选择任何复选框，则不应选择任何单选按钮。

到目前为止，我已经编写了以下 JS 代码:

function validate()
{
    if(document.getElementById("pdcb").checked) //if pdcb checkbox(es) is/are checked
  { 
    document.getElementById("radio1").checked = true;
    document.getElementById("radio2").checked = false;
  }  
  else if (!document.getElementById("pdcb").checked) //if none of the pdcb checkbox(es) is/are checked
  { 
    document.getElementById("radio1").checked = false;
    document.getElementById("radio2").checked = true;
  }
  else //if no checkbox is checked, then don't populate any radio button
  {
    document.getElementById("radio1").checked = false;
    document.getElementById("radio2").checked = false;
  }

}

PS:我需要纯 JavaScript 代码。我无法使用 jQuery。

编辑

对于我的要求有误，我深表歉意。但这是正确的要求。如果选中任何 PD 复选框，则应选中单选按钮 Radio 1。如果没有选择任何 PD 复选框，则应选择单选按钮 Radio 2。同样，如果没有选择任何复选框，则不应选择任何单选按钮。

Answer 1

我想首先指出，如果您在 JSFiddle 中对此进行测试，则内联 onclick 的 LOAD TYPE 需要设置为“No Wrap-in” > 工作事件。

现在，看看你的代码。文档元素可以绑定(bind)到class 或ID。类适用于当您使用共享相同功能、样式等的元素时； ID 用于唯一元素并且仅用于唯一元素。例如，在 JavaScript 中，当您尝试使用

测试已检查的 pdcb 元素时

document.getElementById("pdcb").checked

JavaScript 只是抓取页面上 ID 为 pdcb 的第一个元素。您有四个具有此 ID 名称的元素；这意味着最后三个 pdcb 元素将被忽略并且从不计算。

相反，让我们利用

document.getElementsByClassName("pdcb")

请注意单词“Element”的复数形式。它的作用是返回一个由类名为 pdcb 的 all 元素组成的数组。几分钟后我们就会了解到我们正在处理一个数组。首先，让我们将大部分 HTML ID 更改为类。

<ul>
   <li>
      <input class="pdcb" type="checkbox" name="G1PD1" onclick="validate()">G1 PD1</li>
   <li>
      <input class="pdcb" type="checkbox" name="G1PD2" onclick="validate()">G1 PD2</li>
</ul>

您需要对所有 pdcb 和 idcb 元素执行此操作。请随意将 radio1 和 radio2 保留为 ID，因为它们是唯一元素，不会像 pdcb 那样重复使用和 idcb 是。

<小时/>

现在我们可以处理 JavaScript 了；假设您已经从上面进行了必要的更改，那么您的 HTML 从这里就可以了。由于我们将内容从 ID 更改为类，因此像下面这样的表达式根本行不通。

document.getElementById("pdcb")

回想一下我之前写的解决方案:

document.getElementsByClassName("pdcb")

还记得我说过这将返回一个元素数组；在您的例子中，有四个 pdcb 元素。

解决此问题的一个选择是，您可以迭代 document.getElementsByClassName("pdcb") 返回的元素数组来评估是否存在任何 pdcb 类已被检查。它看起来像这样:

var pdcbClass = document.getElementsByClassName("pdcb");

    //for each pdcb class on our HTML document
    for (var i = 0; i < pdcbClass.length; i++) {
       if (pdcbClass[i].checked == true) {
          //the next two lines are straight from your JavaScript code
          document.getElementById("radio1").checked = true;
          document.getElementById("radio2").checked = false;
        }
    }

正如您所想象的，我们可以对页面上的 idcb 类元素使用完全相同的想法。当我们完成时，我们应该得到如下所示的内容。

function validate()
{
  var pdcbClass = document.getElementsByClassName("pdcb");
  var idcbClass = document.getElementsByClassName("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;
    }
  }
}

但是有一个问题!无论哪个复选框触发此 validate() 函数，都不会关闭任何复选框。这意味着，如果我们选中带有 pdcb 类的框，然后选中带有 idcb 类的框，则 pdcb 框仍然保持选中状态；我们从未说过要取消选中它。这意味着，即使是 idcb 点击触发了 validate()，函数中的所有代码都会被执行。您要么必须让用户在检查新框之前手动取消选中前一个框，要么需要编写一些代码来执行相同的操作。具体来说，当选中一个新复选框时，您需要清除其已选中属性的前一个复选框。

这是一个完全不同的问题，值得提出不同的问题。另请注意，这不是编写此事件/功能的唯一方法，但您已经取得了良好的进展。

这基本上是您继续下去所需的代码。

https://jsfiddle.net/a4k9xggu/