检查是否至少选择了一个单选按钮 - JavaScript

Question

假设我有以下HTML表单：

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Choose</title>
</head>

<body>
  <form method="post" enctype="application/x-www-form-urlencoded">
    <h1>Choose</h1>

    <p><input type="radio" name="choose" value="psychology"><font size="5" color="#0033CC">Instant Psychology</font><br>
    <br>
    <input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br>
    <br>
    <input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br>
    <br>
    <input type="submit" name="Submit" value="Go"></p>
  </form>


</body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>

如何编写JavaScript函数以确保至少选择了一个收音机输入？

Answer 1

像这样的事情应该可以解决问题

if ($("input[type=radio]:checked").length > 0) {
    // Do your stuff here
}

更新没有看到它不应该有 jQuery，所以这里有一个替代函数来检查纯 JS

 function check(){
     var radios = document.getElementsByName("choice");

     for (var i = 0, len = radios.length; i < len; i++) {
          if (radios[i].checked) {
              return true;
          }
     }

     return false;
 }

Answer 2

如果您的目标浏览器支持HTML5 required属性，则无需 javascript 即可完成此操作。

<input type="radio" name="choose" value="psychology" required>
<input type="radio" name="choose" value="geography" required>
<input type="radio" name="choose" value="gastronomy" required>

请注意，在 chrome 中，您只需要将required放在其中一个输入上。 我不确定其他浏览器会做什么。

除了 javascript 验证（如所选答案）之外，我通常还会这样做，以便也支持 html 4 浏览器。

Answer 3

循环遍历<input>标签，检查类型以及是否被选中。

function isOneChecked() {
  // All <input> tags...
  var chx = document.getElementsByTagName('input');
  for (var i=0; i<chx.length; i++) {
    // If you have more than one radio group, also check the name attribute
    // for the one you want as in && chx[i].name == 'choose'
    // Return true from the function on first match of a checked item
    if (chx[i].type == 'radio' && chx[i].checked) {
      return true;
    } 
  }
  // End of the loop, return false
  return false;
}

这是在 jsfiddle 上的操作

Answer 4

我是这样解决的。

if(document.querySelector('input[name="choice"]:checked') == null) {
    window.alert("You need to choose an option!");
}

Answer 5

由于您说您需要知道是否“至少选择了一个输入”，因此您可能需要复选框而不是单选按钮。 （您一次只能从一组共享name值的单选按钮中选择一个单选按钮。）

您可能应该删除font标签并稍微更新您的 HTML：

HTML

<h1>Choose</h1>
<div>
    <input type="checkbox" id="ckb-psychology" name="choose" value="psychology">
    <label for="ckb-psychology" class="blue">Instant Psychology</label>
</div>
<div>
    <input type="checkbox" id="ckb-geography" name="choose" value="geography">
    <label for="ckb-geography" class="red">Instant Geography</label>
</div>
<div>
    <input type="checkbox" id="ckb-gastronomy" name="choose" value="gastronomy">
    <label for="ckb-gastronomy" class="purple">Instant Gastronomy</label>
</div>
<input type="submit" name="Submit" value="Go">

CSS

label { font-size: 1.5em; }

.blue { color: #0033CC; }
.red { color: #CC0000; }
.purple { color: #660033; }

JavaScript

function isOneChecked ( name ) {

    var checkboxes = document.getElementsByName( name ),
        i = checkboxes.length - 1;

    for ( ; i > -1 ; i-- ) {

        if ( checkboxes[i].checked ) { return true; }

    }

    return false;
}

Answer 6

该问题要求JS解决方案。 但是，这里有一个非常简单的技巧可以使用HTML完成此操作。 您可以简单地在HTML input tag使用required关键字。

示例代码

<input type="radio" name="gender" value="male" required>Male<br>
<input type="radio" name="gender" value="female">Female

你的表格

请注意，您只需为整个无线电组提及一次required关键字。

<form method="post" enctype="application/x-www-form-urlencoded">
    <h1>Choose</h1>

    <p><input type="radio" name="choose" value="psychology" required><font size="5" color="#0033CC">Instant Psychology</font><br>
    <br>
    <input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br>
    <br>
    <input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br>
    <br>
    <input type="submit" name="Submit" value="Go"></p>
  </form>

检查是否至少选择了一个单选按钮 - JavaScript

问题描述

6 个解决方案

解决方案1
45 2012-10-25 01:26:24

解决方案2
13 2013-08-27 18:29:45

解决方案3
9 已采纳 2012-10-25 01:27:48

解决方案4
6 2018-01-02 21:11:48

解决方案5
2 2012-10-25 02:12:51

解决方案6
0 2019-06-27 00:51:15

检查是否至少选择了一个单选按钮 - JavaScript

问题描述

6 个解决方案

解决方案1 45 2012-10-25 01:26:24

解决方案2 13 2013-08-27 18:29:45

解决方案3 9 已采纳 2012-10-25 01:27:48

解决方案4 6 2018-01-02 21:11:48

解决方案5 2 2012-10-25 02:12:51

解决方案6 0 2019-06-27 00:51:15

解决方案1
45 2012-10-25 01:26:24

解决方案2
13 2013-08-27 18:29:45

解决方案3
9 已采纳 2012-10-25 01:27:48

解决方案4
6 2018-01-02 21:11:48

解决方案5
2 2012-10-25 02:12:51

解决方案6
0 2019-06-27 00:51:15