按顺序对复选框进行Javascript验证答案

【问题标题】：Javascript validation for checkbox in sequence按顺序对复选框进行Javascript验证
【发布时间】：2017-01-29 12:34:23
【问题描述】：

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

【问题讨论】：

标签： javascript jquery validation checkbox sequence

【解决方案1】：

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

【讨论】：

谢谢，但有一些问题...如果我检查 1，然后检查 2 和 3，则没有问题。但是如果我想检查 1、3、4、5 怎么办？我的意思是没有组合框 1.. 例如有 5 个复选框，我检查 1，然后检查 3,4,5（按顺序）.. 怎么做？
@resa 你测试过我的代码吗.....我已经处理好了。单击复选框时，您只需要检查是否选中了所有先前的复选框。请告诉我此代码的问题，否则请接受此作为答案。
我已经测试了你的代码......这是工作，但我需要选择不是所有以前的，而是像这个例子一样，如果我有 6 个组合框（a，b，c，d，e，f）检查 a then c,d,e 应该可以工作，但是如果我检查 a then cef 则不应该工作...这就是我需要的，而不是从 a then b,c,d
您的要求不明确。你想要的顺序本身就是令人困惑的。您是说 a-c-d-e 有效，但 a-c-e-f 无效。是你的复选框的编号是固定的，那么这将起作用，否则不会。
@resa 请测试我更新的答案。它应该是你的问题。并投票+接受这个答案

【解决方案2】：

试试这个 -

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

【讨论】：

如果我检查了所有的复选框，那就行了。但我需要的是按顺序或顺序检查的复选框，例如我检查 1、2 和 3 是正确的，但如果我检查 1 和3（不按顺序或顺序）那是错误的。谢谢