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事件工作。

现在，到你的代码。文档元素可以绑定到class或ID。当您使用共享相同功能，样式等的元素时，类是用于; ID的是唯一元素和唯一元素只有。例如，在你的JavaScript，当您试图测试检查pdcb元素与

document.getElementById("pdcb").checked

的JavaScript只是抓住与pdcb的ID在页面上的第一个元素。你有四个具有这个ID名称的元素;这意味着最后三个pdcb元素将被忽略并且不会被评估。

相反，让我们利用

document.getElementsByClassName("pdcb") 

注意单词'元素'的复数形式。它所做的是返回一组全部元素，类名称为pdcb。我们会在几分钟内处理一个数组。首先，我们将大部分HTML标识改为类。

<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; 
    } 
    } 
} 

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

这是一个完全不同的问题，值得一个不同的问题。还要考虑到这不是写这个事件/功能的唯一方法，但是你取得了很好的进展。

这里是您需要继续执行的代码。

https://jsfiddle.net/a4k9xggu/