JS在頁面限制checkbox最大復選數
阿新 • • 發佈：2017-06-01
clas alert fonts 還要 val inpu choice 技術 tracking
應該是挺簡單的代碼, 記錄一下分享.
首先最直接的想法就是使用循環, 用局部變量記錄已選的checkbox, 達到最大值就將余下的checkbox都禁止選擇, 例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS限制checkbox復選框多選</title>
<script language="javascript" type="text/javascript">
function onCheckBox(checkbox)
{
var items = document.getElementsByName("item");
var maxChoices = 3;
var flag = 0;
for(var i=0; i<items.length; i++)
{
if(items[i].checked)
{
flag ++;
}
}
if(flag >= maxChoices)
{
for(var k=0; k<items.length; k++)
{
if(!items[k].checked)
{
items[k].disabled = true;
}
}
}
else
{
for(var p=0; p<items.length; p++)
{
if(!items[p].checked)
{
items[p].disabled = false;
}
}
}
}
function onSubmitVote()
{
var items = document.getElementsByName("item");
var choices = 0;
var maxChoices = 3;
for(var j=0; j<items.length; j++)
{
if(items[j].checked)
{
choices ++;
}
}
if(choices == 0)
{
alert("請選擇選項再提交");
}
else if(choices > maxChoices)
{
alert("選擇選項不能超過 "+ maxChoices + "個");
}
else
{
alert("提交成功");
}
}
</script>
</head>
<body >
JS限制checkbox復選框多選
<br><br>
<input type="checkbox" value="value1" name="item" onClick="onCheckBox(this);"/> 選項一
<br>
<input type="checkbox" value="value2" name="item" onClick="onCheckBox(this);"/> 選項二
<br>
<input type="checkbox" value="value3" name="item" onClick="onCheckBox(this);"/> 選項三
<br>
<input type="checkbox" value="value4" name="item" onClick="onCheckBox(this);"/> 選項四
<br>
<input type="checkbox" value="value5" name="item" onClick="onCheckBox(this);"/> 選項五
<br><br>
<input type="button" id="submit_vote" name="submit_vote" value="提交" onClick="onSubmitVote()" />
</body>
</html>
效果是沒問題, 但通常第一想法都是比較粗糙的, 好的東西須要加以雕琢. 上面用的的是局部變量, 所以每次進入js的onCheckBox()都是新的變量, 還要循環幾次, 但換成全局變量, 每次進入, flag的值都是繼續上次操作的值, 那麽能夠降低循環的次數了. 針對該部分做改動, 例如以下:
<script language="javascript" type="text/javascript">
var maxChoices = 3;
var flag = 0;
function onCheckBox(checkbox)
{
var items = document.getElementsByName("item");
//var maxChoices = 3;
//var flag = 0;
if(checkbox.checked)
{
flag ++;
}
else
{
flag --;
}
if(flag < maxChoices)
{
for(var i=0; i<items.length; i++)
{
if(!items[i].checked)
{
items[i].disabled = false;
}
}
}
else
{
for(var i=0; i<items.length; i++)
{
if(!items[i].checked)
{
items[i].disabled = true;
}
}
}
}
function onSubmitVote()
{
var items = document.getElementsByName("item");
var choices = 0;
//var maxChoices = 3;
for(var j=0; j<items.length; j++)
{
if(items[j].checked)
{
choices ++;
}
}
if(choices == 0)
{
alert("請選擇選項再提交");
}
else if(choices > maxChoices)
{
alert("選擇選項不能超過 "+ maxChoices + "個");
}
else
{
alert("提交成功");
}
}
</script>這樣效果是一樣的, 但循環就少一次.
JS在頁面限制checkbox最大復選數