javascript 检查复选框和无线电是否已选中

wvt8vs2t  于 2023-02-21  发布在  Java
关注(0)|答案(3)|浏览(113)

我已经看过了这个主题的几乎每一个答案,我很难想出一个解决方案。
基本上,我试图单击一个按钮,该按钮运行一个函数,该函数检查是否选中了单选按钮或复选框。
稍后,我希望能够测试这些选择的不同组合。
这是密码。

<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)
xghobddn

xghobddn1#

您的代码似乎有拼写错误。代码必须为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>
hgb9j2n6

hgb9j2n62#

您可以使用如下简单的解决方案:

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

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

zf9nrax13#

您的代码存在一些问题:

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

Input元素没有内容也没有结束标记。BR元素也是空的,也没有结束标记(您已经将其编写为结束标记)。如果您使用的是作为XML的XHTMl,则应该使用

<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!");
  }
}

相关问题