checkbox 最多选两项
Posted zzg02
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了checkbox 最多选两项相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>久信臻氏</title>
</head>
<body>
<form action="index.php" method="post">
<div>
<label for="">姓名：</label>
<input type="text" name="user" id="user">
</div>
<div>
<label for="">电话：</label>
<input type="text" name="tel" id="tel">
</div>
<div>
<label for="">面膜：</label><small>(最多选两项)</small><br>
<input type="checkbox" value="1" name="mask[]" class="mask">11111<br>
<input type="checkbox" value="2" name="mask[]" class="mask">22222<br>
<input type="checkbox" value="3" name="mask[]" class="mask">33333<br>
<input type="checkbox" value="4" name="mask[]" class="mask">44444<br>
<input type="checkbox" value="5" name="mask[]" class="mask">55555<br>
<input type="checkbox" value="6" name="mask[]" class="mask">66666<br>
</div>
<div>
<input id="submit" type="submit" value="提交">
</div>
</form>
</body>
<script>
window.onload=function(){
var user=document.getElementById("user");
var tel=document.getElementById("tel");
var submit=document.getElementById("submit");
var mask=document.getElementsByClassName("mask");
var maskarr=[];
for(var i=0;i<mask.length;i++){
mask[i].onclick=function () {
var i=n=0;
var th=this;
if(th.checked == true)
{
maskarr.push(th);
if(maskarr.length > 2){
maskarr[0].checked = false;
maskarr.shift();
}
}else{
if(maskarr.length>1){
for(var i=0; i<maskarr.length; i++){
if(th == maskarr[i]) maskarr.splice(i,1);
}
}else{
th.checked = true;
return false;
}
}
}
}
submit.onclick=function () {
if(!user.value){
alert(‘姓名没有填写！‘);
return false;
}else if(!tel.value){
alert(‘电话没有填写！‘);
return false;
}else if(!maskarr.length){
alert(‘选项至少选择一项！‘);
return false;
}else{
if(tel.value.length==11){
var reg =/^[0-9]*$ /;
if (!reg.test(tel.value)) {
alert("请输入正确手机号码！");
return false;
}
return true;
}
alert("请输入正确手机号码！");
return false;
}
}
}
</script>
</html>
以上是关于checkbox 最多选两项的主要内容，如果未能解决你的问题，请参考以下文章