检查复选框和单选是否被选中答案

【问题标题】：Checking if checkboxes and radios are checked检查复选框和单选是否被选中
【发布时间】：2012-12-05 23:16:33
【问题描述】：

我已经回答了几乎所有关于这个主题的答案，但我很难想出一个解决方案。

基本上，我正在尝试单击一个按钮，该按钮运行一个检查是否选中了单选按钮或复选框的功能。

稍后我希望能够测试这些选择的不同组合。

这是代码。

<html>
<head>
  <script type = "text/javascript">
    function custom_urls(){
      var option1 = document.getElementById("option1");
      var option2 = document.getElementByid("option2");
      var bonus = document.getElementByid("bonus");                                          

      if ( option1.checked ){
        alert("Option1 is checked!");
      }
    }


  </script>
</head>
<body>
  <input type = "radio" id = "option1" > Option1 </input></br>
  <input type = "radio" id = "option1" value = "option2"> Option2 </input></br>
  <input type = "checkbox" id = "bonus" value = "bonus"> Bonus </input></br>
  <button type = "button" onclick = "custom_urls()">Click Me</button> 

</body>
</html>

我也试过把：

if(option1.checked == true)

和

if(document.getElementById("option1").checked == true)

谢谢！

【问题讨论】：

这可以通过 jQuery 轻松完成。你会用jQuery吗？
另外，你不能有两个具有相同 id 的元素。

标签： javascript javascript-events

【解决方案1】：

您的代码似乎有错别字。一定是document.getElementById:

<html>
<head>
  <script type = "text/javascript">
    function custom_urls(){
      var option1 = document.getElementById("option1");
      var option2 = document.getElementById("option2");
      var bonus = document.getElementById("bonus");                                          

      if (option1.checked){
        alert("Option1 is checked!");
      }
    }


  </script>
</head>
<body>
  <input type = "radio" id = "option1" > Option1 </input></br>
  <input type = "radio" id = "option2" value = "option2"> Option2 </input></br>
  <input type = "checkbox" id = "bonus" value = "bonus"> Bonus </input></br>
  <button type = "button" onclick = "custom_urls()">Click Me</button>

</body>
</html>

【讨论】：

感谢您的回复，我没有注意到。

【解决方案2】：

您可以像这样使用简单的解决方案：

var checkbox = document.getElementById('checkbox_id');

if (checkbox.getAttribute('checked') !== null) {
    // .. do something
}

【讨论】：

不，得到checked 属性，即defaultChecked 值。
哦，真的，很抱歉。
另外，getAttribute 返回一个字符串，与null 相比没有多大意义。它将是 'checked' 或 ''（空字符串），但由于浏览器的可变性，最好阅读 checked 或 defaultChecked 属性。

【解决方案3】：

您的代码存在一些问题：

<input type = "radio" id = "option1" > Option1 </input></br>

输入元素没有内容，也没有结束标签。 BR 元素也是空的并且没有结束标记（您已将其写为结束标记）。如果您使用 XHTMl 作为 XML，那么您应该使用

<option ... /><br />

但没有人将内容作为 XML 提供，所以只需使用纯 HTML。

选项2

重复的 ID 无效。要成功，表单控件必须具有名称属性并且在表单中，它们不需要 ID。单选按钮需要一个具有相同名称的组，如果您只有一个，那么您不能在不重置表单（或使用脚本）的情况下取消选择它。

你的 HTML 应该是这样的：

<form>
  <input type="radio" name="rb0" value="option1" > Option1<br>
  <input type="radio" name="rb0" value="option2" > Option2<br>
  <input type="checkbox" name="bonus" value="bonus"> Bonus<br>
  <button type="button" onclick="custom_urls(this)">Click Me</button>

那么你的函数可以是：

function custom_urls(button) {
  var form = button.form;
  var option1 = form.rb0[0];
  var option2 = form.rb0[1];
  var bonus = form.bonus;

  if ( option1.checked ){
    alert("Option1 is checked!");
  }
}

【讨论】：