Home:ALL Converter>Javascript validation for checkbox in sequence

Javascript validation for checkbox in sequence

Ask Time:2016-09-21T18:06:59         Author:re sa

Json Formatter

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>

Author:re sa,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/39613501/javascript-validation-for-checkbox-in-sequence
Sumit Kumar :

<!DOCTYPE html>\n<html>\n<head>\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js\"></script>\n<script>\n$(document).ready(function(){\n $(\"input[type='checkbox']\").change(function(){\n var isCheck = $(this).prevAll(\"input\").is(\":checkbox\");\n var total = $(this).prevAll(\"input[type='checkbox']\").length;\n var checkTotal = $(this).prevAll(\"input[type='checkbox']:checked\").length;\n if(isCheck && ((total-checkTotal)>1)){\n $(this).prop(\"checked\",false);\n alert(\"false\");\n }else{\n alert(\"ture\");\n }\n });\n});\n</script>\n</head>\n<body>\n<form action=\"form-si-hasil.php\" method=\"post\" onsubmit=\"return validate(this)\" id=\"form\" name=\"form\">\n<h1>Form Hobi</h1>\n<input type=\"checkbox\" name=\"ck1\" value=\"Membaca\" id=\"checkbox1\">Membaca\n<br />\n<input type=\"checkbox\" name=\"ck2\" value=\"Sport\" id=\"checkbox2\">Sport\n<br />\n<input type=\"checkbox\" name=\"ck3\" value=\"Singing\" id=\"checkbox3\">Singing\n<br />\n<input type=\"checkbox\" name=\"ck4\" value=\"Dancing\" id=\"checkbox4\">Dancing\n<br />\n<input type=\"checkbox\" name=\"ck4\" value=\"Dancing\" id=\"checkbox4\">test\n<br />\n<input type=\"checkbox\" name=\"ck4\" value=\"Dancing\" id=\"checkbox4\">test 1\n<br />\n<br />\n<input type=\"submit\">\n</form>\n\n</body>\n</html>\n",
2016-09-21T10:29:41
yy