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。同样，如果没有选中任何复选框，则应选择 NONE 单选按钮。

到目前为止，我已经编写了以下 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。同样，如果没有选中任何复选框，则应选择 NONE 单选按钮。

Answer 1

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

现在，到您的代码。文档元素可以绑定到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()，函数中的所有代码都会被执行。要么你必须让用户在选中一个新框之前手动取消选中前一个框，要么你需要编写一些代码来做同样的事情。具体来说，当检查一个新的复选框时，您需要清除其checked属性的上一个框。

这是一个完全不同的问题，值得提出不同的问题。还要考虑到这不是编写此事件/功能的唯一方法，但您正在取得良好进展。

这基本上是您需要继续运行的代码。

https://jsfiddle.net/a4k9xggu/