Javascript validation for checkbox in sequence

Question

first I'm sorry for my bad english language. I'm new with Javascript and I had a problem. 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. Does anyone know how to validate with that condition with 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>

score 1 · Answer 1 · answered Sep 21 '16 at 10:14

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>

That's work if I checked all of the checkbox.. but what I need is checkbox checked in sequence or order, for example I check 1, 2, and 3 that's correct, but if I check 1 and 3 (not in sequence or order) thats false. Thanks — re sa, Sep 21 '16 at 10:29

Sumit Kumar · Accepted Answer · 2016-09-26T07:45:43.943

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>

edited Sep 26 '16 at 07:45

answered Sep 21 '16 at 10:29

Sumit Kumar

394
2
20

Thanks you but there some problem... if I check 1 and then 2 and 3 there's no problem. But how if I want to check 1, 3,4,5? What I mean in sequence is without the combobox 1.. for the example there are 5 checkbox, I check 1 and then 3,4,5 (in sequence).. how to do that? – re sa Sep 21 '16 at 23:14
@resa have you tested my code.....i have already taken care of that. on click of checkbox you just need to check that all prevous checkboxes are checked or not. Please tell me problem with this code otherwise accept this as answer. – Sumit Kumar Sep 22 '16 at 14:06
I have tested your code... that's work, but I need to select not all previous but like this example, there's 6 combobox (a,b,c,d,e,f) if I checked a then c,d,e that should be work, but if I check a then c e f than thats not should be work... thats what I need, not from a then b,c,d – re sa Sep 22 '16 at 23:52
there is an ambiguity in your requirement. sequence which you want is itself confusing. you are saying a-c-d-e is valid but a-c-e-f is not valid. is your no of checkbox is fixed then this will work otherwise not. – Sumit Kumar Sep 23 '16 at 05:21
@resa please test my updated answer. it should your problem. and upvote + accept this answer – Sumit Kumar Sep 26 '16 at 07:46
@resa if this solved your issue then accept this as an answer by clicking tick on left side of an answer. – Sumit Kumar Sep 26 '16 at 12:39

Javascript validation for checkbox in sequence

2 Answers2