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

我想首先指出，如果您在JSFiddle中对此进行测试，则需要将LOAD TYPE设置为"无包装"才能使内联onclick事件正常工作。

现在，进入您的代码。文档元素可以绑定到class或ID。类适用于使用共享相同功能、样式等的元素的情况;ID 仅适用于唯一元素和唯一元素。例如，在您的 JavaScript 中，当您尝试pdcb使用

document.getElementById("pdcb").checked

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

相反，让我们利用

document.getElementsByClassName("pdcb")

请注意单词"元素"的复数形式。这样做是返回一个类名为 pdcb 的所有元素的数组。我们将在几分钟内了解我们正在处理数组的事实。首先，让我们将大部分 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和ID radio2，因为它们是独特的元素，不像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框仍保持选中状态;我们从来没有说过要取消选中它。这意味着即使触发validate()的是idcb点击，函数中的所有代码都会被执行。要么必须让用户在选中新框之前手动取消选中上一个框，要么需要编写一些执行相同操作的代码。具体而言，选中新复选框时，需要清除其checked属性的先前框。

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

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

https://jsfiddle.net/a4k9xggu/