验证JavaScript功能复选框
[英]JavaScript Function to validate checkbox
问题描述
I'm trying to not allow both checkboxes to be checked at the same time. 
我试图不允许同时选中两个复选框。 Here is my vanilla JS. 这是我的香草JS。 I have the function already validating to return true when one is checked and false when neither are checked. 我有已经验证的函数，当选中一个时返回true，而当两个都没有选中时返回false。 Radio boxes are not an option. 不能选择单选框。
function valForm() { var both = document.getElementById("cEmail1" & "cPhone1"); for (var i = 1; i <= 2; i++) { if (document.getElementById("cEmail1").checked) { return true; } else if (document.getElementById("cPhone1").checked) { return true; } else if (both.checked) { return false; } else { return false; } } }
<form action="http://severien.com/grit/formecho.php" method="post" name="contactUsForm" onsubmit="return valForm()"> <span class="box3"><label for="cEmail" class="l5" >Contact me by email</label> <input class="check1" id="cEmail1" type="checkbox" name="contactbyemail" /></span> <span class="box4"><label for="cPhone" class="l6">Contact me by phone</label> <input class="check2" id="cPhone1" type="checkbox" name="contactbyphone" /></span> <br /> <div class="formSubmit"><input type="submit" value="Submit" /></div> </form>
4 个解决方案
解决方案1
3 2018-06-19 17:24:32
If radio boxes really aren't an option, then there are a few issues with your code. 如果单选框确实不是一个选择，那么您的代码就会出现一些问题。 First of all, you are checking if each of the boxes is checked, and if either of them is checked, then you are immediately returning. 首先，您要检查是否每个框都被选中，如果两个框都被选中，则您将立即返回。 The second, and much larger problem, is that your both element should be undefined. 第二个更大的问题是， both元素都应未定义。 The & in JavaScript is a bitwise operator, and getElementById should only return one element. JavaScript中的&是按位运算符， getElementById应该只返回一个元素。 Instead, you could implement the equivalent of a logical XOR like so: 相反，您可以实现等效的逻辑XOR，如下所示：
function valForm(){
return document.getElementById("cEmail1").checked != document.getElementById("cPhone1").checked;
}
解决方案2
1 2018-06-19 17:22:14
You can't get two elements at the same time using getElementById , so you'll need to check them separately by using the && operator. 使用getElementById不能同时获得两个元素，因此需要使用&&运算符单独检查它们。
You also need to check this first, because the two if statements before this will preempt this check. 您还需要先进行检查，因为在此之前的两个if语句将优先进行此检查。
function valForm() { var cEmail = document.getElementById("cEmail1"); var cPhone1 = document.getElementById("cPhone1"); if (cEmail.checked && cPhone1.checked) { console.log("false"); return false; } else if (cEmail.checked || cPhone1.checked) { console.log("true"); return true; } else { console.log("false"); return false; } }
<form action="http://severien.com/grit/formecho.php" method="post" name="contactUsForm" onsubmit="return valForm()"> <span class="box3"><label for="cEmail" class="l5" >Contact me by email</label> <input class="check1" id="cEmail1" type="checkbox" name="contactbyemail" /></span> <span class="box4"><label for="cPhone" class="l6">Contact me by phone</label> <input class="check2" id="cPhone1" type="checkbox" name="contactbyphone" /></span> <br /> <div class="formSubmit"><input type="submit" value="Submit" /></div> </form>
解决方案3
0 2018-06-19 17:22:49
This should return false if neither or both are checked: 如果两个或两个都未选中，则应返回false：
function valForm() { var email = document.getElementById("cEmail1"); var phone = document.getElementById("cPhone1") if (email.checked && !phone.checked || !email.checked && phone.checked) { console.log('ok') return true; } console.log('no ok') return false; }
<form action="http://severien.com/grit/formecho.php" method="post" name="contactUsForm" onsubmit="return valForm()"> <span class="box3"><label for="cEmail" class="l5" >Contact me by email</label> <input class="check1" id="cEmail1" type="checkbox" name="contactbyemail" /></span> <span class="box4"><label for="cPhone" class="l6">Contact me by phone</label> <input class="check1" id="cPhone1" type="checkbox" name="contactbyphone" /></span> <br /> <div class="formSubmit"><input type="submit" value="Submit" /></div> </form> </div>
解决方案4
-1 2018-06-19 17:31:19
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.slectOne').on('change', function() {
$('.slectOne').not(this).prop('checked', false);
$('#result').html($(this).data( "id" ));
if($(this).is(":checked"))
$('#result').html($(this).data( "id" ));
else
$('#result').html('Empty...!');
});
});
</script>
</head>
<body>
<input type="checkbox" class="slectOne" data-id="1 selected"/>
<input type="checkbox" class="slectOne" data-id="2 selected"/>
<input type="checkbox" class="slectOne" data-id="3 selected"/>
<input type="checkbox" class="slectOne" data-id="4 selected"/>
<input type="checkbox" class="slectOne" data-id="5 selected"/>
<input type="checkbox" class="slectOne" data-id="6 selected"/>
<input type="checkbox" class="slectOne" data-id="7 selected"/>
<input type="checkbox" class="slectOne" data-id="8 selected"/>
<input type="checkbox" class="slectOne" data-id="9 selected"/>
<input type="checkbox" class="slectOne" data-id="10 selected"/>
<span id="result"></span>
</body>
</html>
here is a good example to use as well https://www.w3schools.com/code/tryit.asp?filename=FB6JK5HW3Z53 这也是一个很好的例子使用https://www.w3schools.com/code/tryit.asp?filename=FB6JK5HW3Z53
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.