JavaScript Function to validate checkbox
Question
I'm trying to not allow both checkboxes to be checked at the same time. Here is my vanilla JS. I have the function already validating to return true when one is checked and false when neither are checked. 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 answers
solution1
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. The & in JavaScript is a bitwise operator, and getElementById should only return one element. Instead, you could implement the equivalent of a logical XOR like so:
function valForm(){
return document.getElementById("cEmail1").checked != document.getElementById("cPhone1").checked;
}
solution2
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.
You also need to check this first, because the two if statements before this will preempt this check.
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>
solution3
0 2018-06-19 17:22:49
This should return false if neither or both are checked:
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>
solution4
-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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.