Question

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

Answer 1

试试这个 -

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

Answer 2

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

2 个答案: