按順序對復選框進行 Javascript 驗證
[英]Javascript validation for checkbox in sequence
問題描述
首先我很抱歉我的英語不好。 我是 Javascript 新手，但遇到了問題。 我的問題是關於使用 javascript 的復選框驗證，所以我應該檢查的第一個復選框或顯示警報（我已經解決了這個問題，所以沒有更多的問題），但第二個問題是復選框應該按順序檢查（或順序）例如有 4 個復選框，我檢查了第一個、第二個和第四個（不按順序/順序），所以有一個警報，但如果我檢查了第一個、第二個和第三個，那就好了。 有誰知道如何使用 javascript 驗證該條件？
這是我的代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="form-si-hasil.php" method="post" onsubmit="return validate(this)" id="form" name="form">
<h1>Form Hobi</h1>
<input type="checkbox" name="ck1" value="Membaca" id="checkbox1">Membaca
<br />
<input type="checkbox" name="ck2" value="Sport" id="checkbox2">Sport
<br />
<input type="checkbox" name="ck3" value="Singing" id="checkbox3">Singing
<br />
<input type="checkbox" name="ck4" value="Dancing" id="checkbox4">Dancing
<br />
<br />
<input type="submit">
</form>
<script src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" language="JavaScript">
function validate(){
var pilihan1 = document.getElementById("checkbox1").checked;
if(pilihan1=="") {
alert("Checkbox pertama tidak boleh kosong");
return false
}
return true
}
</script>
</body>
</html>
2 個解決方案
解決方案1
1 2016-09-21 10:14:00
嘗試這個 -
<script type="text/javascript" language="JavaScript">
function validate(){
var pilihan1 = document.getElementById("checkbox1").checked;
var pilihan2 = document.getElementById("checkbox2").checked;
var pilihan3 = document.getElementById("checkbox3").checked;
var pilihan4 = document.getElementById("checkbox4").checked;
var flag =0;
if(pilihan1=="") {
alert("Checkbox pertama tidak boleh kosong");
flag=0;
}
else if(pilihan2=="") {
alert("Checkbox 2");
flag=0;
}
else if(pilihan3=="") {
alert("Checkbox 3");
flag=0;
}
else if(pilihan4=="") {
alert("Checkbox 4");
flag=0;
} else {
flag=1;
}
if(flag==1){
return true;
} else {
return false;
}
</script>
解決方案2
1 已采納 2016-09-21 10:29:41
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input[type='checkbox']").change(function(){
var isCheck = $(this).prevAll("input").is(":checkbox");
var total = $(this).prevAll("input[type='checkbox']").length;
var checkTotal = $(this).prevAll("input[type='checkbox']:checked").length;
if(isCheck && ((total-checkTotal)>1)){
$(this).prop("checked",false);
alert("false");
}else{
alert("ture");
}
});
});
</script>
</head>
<body>
<form action="form-si-hasil.php" method="post" onsubmit="return validate(this)" id="form" name="form">
<h1>Form Hobi</h1>
<input type="checkbox" name="ck1" value="Membaca" id="checkbox1">Membaca
<br />
<input type="checkbox" name="ck2" value="Sport" id="checkbox2">Sport
<br />
<input type="checkbox" name="ck3" value="Singing" id="checkbox3">Singing
<br />
<input type="checkbox" name="ck4" value="Dancing" id="checkbox4">Dancing
<br />
<input type="checkbox" name="ck4" value="Dancing" id="checkbox4">test
<br />
<input type="checkbox" name="ck4" value="Dancing" id="checkbox4">test 1
<br />
<br />
<input type="submit">
</form>
</body>
</html>
javascript中的轉義序列驗證
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.