按顺序对复选框进行Javascript验证
Posted
技术标签:
【中文标题】按顺序对复选框进行Javascript验证【英文标题】：Javascript validation for checkbox in sequence 【发布时间】：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>
【问题讨论】：
【参考方案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（不按顺序或顺序）那是错误的。谢谢以上是关于按顺序对复选框进行Javascript验证的主要内容，如果未能解决你的问题，请参考以下文章
按首字母 Javascript 按字母顺序对对象进行排序和分组