html中<radio>单选按钮控件标签用法解析及如何设置默认选中

Posted 2023-04-30

参考技术A 　　Radio 对象代表 html 表单中的单选按钮。在 HTML 表单中 <input type="radio"> 每出现一次，一个 Radio 对象就会被创建。
　　单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件句柄。您可通过遍历表单的 elements[] 数组来访问 Radio 对象，或者通过使用 document.getElementById()。本回答被提问者和网友采纳

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

我正在尝试编写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的单选按钮。

答案

我想首先指出，如果您在JSFiddle中测试它，则需要将LOAD TYPE设置为“No Wrap-in”，以使您的内联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和radio2保存为ID，因为它们是独特的元素，不像pdcb和idcb那样重复使用。

---

现在我们可以解决JavaScript;假设您已经从上面进行了必要的更改，那么HTML就可以了。由于我们将ID从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/