我在HTML表单中有两个单选按钮。当其中一个字段为空时,将出现一个对话框。如何查看单选按钮是否被选中?


当前回答

如果你想使用普通的JavaScript,不想在每个单选按钮上添加id而使你的标记变得混乱,并且只关心现代浏览器,那么下面的函数式方法对我来说比for循环更有品位:

<form id="myForm">
<label>Who will be left?
  <label><input type="radio" name="output" value="knight" />Kurgan</label>
  <label><input type="radio" name="output" value="highlander" checked />Connor</label>
</label>
</form>

<script>
function getSelectedRadioValue (formElement, radioName) {
    return ([].slice.call(formElement[radioName]).filter(function (radio) {
        return radio.checked;
    }).pop() || {}).value;
}

var formEl = document.getElementById('myForm');
alert(
   getSelectedRadioValue(formEl, 'output') // 'highlander'
)
</script>

如果两者都没有选中,它将返回undefined(尽管您可以更改上面的行以返回其他内容,例如,要得到false返回,您可以将上面的相关行更改为:}).pop() || {value:false}).value;)

还有一种前瞻性的polyfill方法,因为RadioNodeList接口应该可以很容易地在表单子无线电元素列表上使用value属性(在上面的代码中作为formElement[radioName]找到),但这也有它自己的问题:如何填充RadioNodeList?

其他回答

让我们假设你有这样的HTML

<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />

对于客户端验证,这里有一些Javascript来检查选择了哪个:

if(document.getElementById('gender_Male').checked) {
  //Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
  //Female radio button is checked
}

根据标记的确切性质,可以使上面的操作更有效,但这应该足以让您入门。


如果你只是想看看页面上是否有单选按钮被选中,PrototypeJS会让你很容易做到。

下面是一个函数,如果页面上至少有一个单选按钮被选中,该函数将返回true。同样,这可能需要根据特定的HTML进行调整。

function atLeastOneRadio() {
    return ($('input[type=radio]:checked').size() > 0);
}

对于服务器端验证(请记住,您不能完全依赖Javascript进行验证!),这取决于您所选择的语言,但是您可以检查请求字符串的性别值。

对于jQuery,它就像这样

if ($('input[name=gender]:checked').length > 0) {
    // do something here
}

让我把它分解成几部分,以便更清楚地解释。 jQuery从左到右处理事物。

input[name=gender]:checked

Input将其限制为输入标记。 [name=gender]将其限制为前一组中具有名称性别的标签。 :checked将其限制为前一组中选中的复选框/单选按钮。

如果您希望完全避免这种情况,可以在HTML代码中将其中一个单选按钮标记为已选中(checked="checked"),这将确保始终选中一个单选按钮。

Try

[...myForm.sex].filter(r=>r.checked)[0].value

函数检查() { 设 v= ([...myForm.].filter(r=>r.checked)[0] ||{}).value ; 控制台.log(v); } <表单 id=“我的表单”> <输入名称=“性别”类型=“无线电”值=“男人”>男人 <输入名称=“性别”类型=“无线电”值=“女人”>女人 </form> <br><button onClick=“check()”>Check</button>

一种简单的JavaScript方式

var radios = document.getElementsByTagName('input');
var value;
for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio' && radios[i].checked) {
        // get value, set checked flag or do whatever you need to
        value = radios[i].value;       
    }
}

HTML:

<label class="block"><input type="radio" name="calculation" value="add">+</label>
<label class="block"><input type="radio" name="calculation" value="sub">-</label>
<label class="block"><input type="radio" name="calculation" value="mul">*</label>
<label class="block"><input type="radio" name="calculation" value="div">/</label>

<p id="result"></p>

JAVAScript:

var options = document.getElementsByName("calculation");

for (var i = 0; i < options.length; i++) {
    if (options[i].checked) {
        // do whatever you want with the checked radio
        var calc = options[i].value;
        }
    }
    if(typeof calc == "undefined"){
        document.getElementById("result").innerHTML = " select the operation you want to perform";
        return false;
}