如何验证JavaScript中的两个复选框
[英]how to validate two checkbox in javascript
问题描述
I have two check boxes with different name and id and I want the users to check at least one of them if not the button will disable! 
我有两个具有不同名称和ID的复选框，我希望用户至少检查其中一个，否则按钮将被禁用！ but if one of them checked it will proceed to the other file 但是如果其中一个选中，它将进入另一个文件
function validate(){ var time12 = document.getElementById("time12").checked; var time24 = document.getElementById("time24").checked; if((time12 == "") && ( time24 == "") ) { alert("Choose your hour rate"); return false; } return true; }
<input id="time12" type="checkbox" name="time12" value="12" />12hours <input id="time24" type="checkbox" name="time24" value="24" />24hours
but before you type your hate comments I want you to inform that I already search about it and I don't have the same question like this! 但是在您输入仇恨评论之前，我想告诉您我已经搜索过它，并且没有类似的问题！
or suggest me other way thank you in advance 或以其他方式建议我谢谢你
4 个解决方案
解决方案1
0 已采纳 2017-07-20 20:16:44
Just add onclick() with your function. 只需在函数中添加onclick() 。
function validate(){ var time12 = document.getElementById("time12").checked; var time24 = document.getElementById("time24").checked; if((time12 == "") && ( time24 == "") ) { alert("Choose your hour rate"); return false; } return true; }
<input id="time12" type="checkbox" name="time12" value="12" />12hours <input id="time24" type="checkbox" name="time24" value="24" />24hours <button onclick="validate()" >submit</button>
解决方案2
0 2017-07-20 20:19:51
To make this work you need to attach an event handler to the change event of the checkboxes. 为此，您需要将事件处理程序附加到复选框的change事件。 You can then enable/disable the button based on the checked state of the elements. 然后，您可以根据元素的选中状态启用/禁用按钮。 Try this: 尝试这个：
$('.hours').change(function() { $('#btn').prop('disabled', !$('.hours:checked').length); }).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <input id="time12" type="checkbox" name="time12" value="12" class="hours" /> 12hours </label> <label> <input id="time24" type="checkbox" name="time24" value="24" class="hours" /> 24hours </label> <input type="submit" value="FORM 3" name="btn_form3" id="btn" />
Note that I added a class of hours to the checkboxes and an id of #btn to the button, simply to make selecting the elements easier. 请注意，我在复选框中添加了一个hours类，在按钮上添加了ID #btn以简化元素的选择。
解决方案3
0 2017-07-20 20:19:51
What you want to do is every time a checkbox is checked, you want to see if both checkboxes are currently checked. 您要做的是每次选中一个复选框时，要查看当前是否同时选中了两个复选框。
To do this its something like 为此，它就像
$( "input:checkbox" ).on("change", function(){
var checked = false;
if($("#input1).prop("checked"))
checked = true;
if($("#input2).prop("checked"))
checked = true;
if(!checked)
button.prop("disabled",true);
}
解决方案4
0 2017-07-20 20:23:13
See this example: https://codepen.io/anon/pen/bRXMpx 参见以下示例： https : //codepen.io/anon/pen/bRXMpx
<script>
function validate(){
var time12 = document.getElementById("time12").checked;
var time24 = document.getElementById("time24").checked;
if((time12 == "") && ( time24 == "") )
{
document.getElementById("btn").disabled = true;
alert("Choose your hour rate");
return false;
}
else
document.getElementById("btn").disabled = false;
return true;
}
</script>
<html>
<input id="time12" type="checkbox" onclick="validate()" name="time12" value="12" />12hours
<input id="time24" type="checkbox" onclick="validate()" name="time24" value="24" />24hours
<input type="submit" id="btn" value="FORM 3" onclick="validate()" name="btn_form3" >
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.