我在HTML表单中有两个单选按钮。当其中一个字段为空时,将出现一个对话框。如何查看单选按钮是否被选中?
当前回答
该代码将在提交表单时提醒所选单选按钮。它使用jQuery来获取所选的值。
$("form").submit(function(e) { e.preventDefault(); $this = $(this); var value = $this.find('input:radio[name=COLOR]:checked').val(); alert(value); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input name="COLOR" id="Rojo" type="radio" value="red"> <input name="COLOR" id="Azul" type="radio" value="blue"> <input name="COLOR" id="Amarillo" type="radio" value="yellow"> <br> <input type="submit" value="Submit"> </form>
其他回答
下面是扩展后的解决方案,即不继续提交,并在未选中单选按钮时发送警报。当然,这意味着你必须在一开始就不检查它们!
if(document.getElementById('radio1').checked) {
} else if(document.getElementById('radio2').checked) {
} else {
alert ("You must select a button");
return false;
}
只要记住在每个单选按钮的表单中设置id ('radio1','radio2'或任何你叫它的名字),否则脚本将无法工作。
使用JQuery,另一种检查单选按钮当前状态的方法是获取属性“checked”。
例如:
<input type="radio" name="gender_male" value="Male" />
<input type="radio" name="gender_female" value="Female" />
在这种情况下,你可以检查按钮使用:
if ($("#gender_male").attr("checked") == true) {
...
}
一个例子:
if (!checkRadioArray(document.ExamEntry.level)) {
msg+="What is your level of entry? \n";
document.getElementById('entry').style.color="red";
result = false;
}
if(msg==""){
return result;
}
else{
alert(msg)
return result;
}
function Radio() {
var level = radio.value;
alert("Your level is: " + level + " \nIf this is not the level your taking then please choose another.")
}
function checkRadioArray(radioButtons) {
for(var r=0;r < radioButtons.length; r++) {
if (radioButtons[r].checked) {
return true;
}
}
return false;
}
该代码将在提交表单时提醒所选单选按钮。它使用jQuery来获取所选的值。
$("form").submit(function(e) { e.preventDefault(); $this = $(this); var value = $this.find('input:radio[name=COLOR]:checked').val(); alert(value); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input name="COLOR" id="Rojo" type="radio" value="red"> <input name="COLOR" id="Azul" type="radio" value="blue"> <input name="COLOR" id="Amarillo" type="radio" value="yellow"> <br> <input type="submit" value="Submit"> </form>
只是对马克·比克做了一点点修改;
HTML代码
<form name="frm1" action="" method="post">
<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" / >
<input type="button" value="test" onclick="check1();"/>
</form>
和Javascript代码来检查单选按钮是否被选中
<script type="text/javascript">
function check1() {
var radio_check_val = "";
for (i = 0; i < document.getElementsByName('gender').length; i++) {
if (document.getElementsByName('gender')[i].checked) {
alert("this radio button was clicked: " + document.getElementsByName('gender')[i].value);
radio_check_val = document.getElementsByName('gender')[i].value;
}
}
if (radio_check_val === "")
{
alert("please select radio button");
}
}
</script>
推荐文章
- 如何在Typescript中解析JSON字符串
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中,'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- [].slice的解释。调用javascript?