當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

checkbox 最多选两项

發布時間：2023/12/2 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 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>
更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的checkbox 最多选两项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： WPF 实现ScrollViewer的垂
下一篇：淘宝购物车效果