Javascript 按顺序验证复选框

标签 javascript jquery validation checkbox 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>

最佳答案

<!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 按顺序验证复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39613501/

相关文章:

jquery - 当一个 div 接触另一个 div 时显示边框颜色

javascript - 通过 JS 正则表达式从字符串中检索数字

javascript - 提交时未运行表单验证

javascript - Google map 地理编码始终使用浏览器语言

javascript - 允许空值,同时在提交后保留输入值

javascript - 从输入字段为元素插入 CSS

javascript - 更改滚动上的事件类

根据 RFC5321/RFC5322 对电子邮件地址进行正则表达式验证

html - 多语言标记验证器

asp.net - MVC3 : different validation for different input scenarios