Javascript按顺序验证复选框

Javascript validation for checkbox in sequence

本文关键字：复选框 验证 顺序 Javascript      更新时间：2023-09-26

首先我很抱歉我的英语不好。我是新的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>

<!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>

试试这个-

<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>
相关文章：