按顺序对复选框进行 Javascript 验证
[英]Javascript validation for checkbox in sequence
问题描述
first I'm sorry for my bad english language.
首先我很抱歉我的英语不好。 I'm new with Javascript and I had a problem.我是 Javascript 新手，但遇到了问题。 My problems are about checkbox validation using javascript, so the first checkbox that I have should checked or show an alert (I have done with this problem, so there's no more problem about it), but the second problem is the checkbox should checked in sequence (or order) for the example there are 4 checkbox, I checked the first, second, and the fourth (not in sequence/order), so there's an alert, but if I checked the first, second, and third, it's good.我的问题是关于使用 javascript 的复选框验证，所以我应该检查的第一个复选框或显示警报（我已经解决了这个问题，所以没有更多的问题），但第二个问题是复选框应该按顺序检查（或顺序）例如有 4 个复选框，我检查了第一个、第二个和第四个（不按顺序/顺序），所以有一个警报，但如果我检查了第一个、第二个和第三个，那就好了。 Does anyone know how to validate with that condition with javascript?有谁知道如何使用 javascript 验证该条件？
Here's my code这是我的代码
<!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
Try this -尝试这个 -
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.