驗證JavaScript功能復選框
[英]JavaScript Function to validate checkbox
問題描述
我試圖不允許同時選中兩個復選框。 這是我的香草JS。 我有已經驗證的函數，當選中一個時返回true，而當兩個都沒有選中時返回false。 不能選擇單選框。
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
如果單選框確實不是一個選擇，那么您的代碼就會出現一些問題。 首先，您要檢查是否每個框都被選中，如果兩個框都被選中，則您將立即返回。 第二個更大的問題是， both元素都應未定義。 JavaScript中的&是按位運算符， getElementById應該只返回一個元素。 相反，您可以實現等效的邏輯XOR，如下所示：
function valForm(){
return document.getElementById("cEmail1").checked != document.getElementById("cPhone1").checked;
}
解決方案2
1 2018-06-19 17:22:14
使用getElementById不能同時獲得兩個元素，因此需要使用&&運算符單獨檢查它們。
您還需要先進行檢查，因為在此之前的兩個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
如果兩個或兩個都未選中，則應返回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>
這也是一個很好的例子使用https://www.w3schools.com/code/tryit.asp?filename=FB6JK5HW3Z53
Javascript一個功能驗證相同形式的復選框組和單選按鈕組
[英]Javascript one function validate same form checkbox group and radio button group
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.