當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS在页面限制checkbox最大复选数
生活随笔
收集整理的這篇文章主要介紹了
JS在页面限制checkbox最大复选数
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
應該是挺簡單的代碼, 記錄一下分享.
首先最直接的想法就是使用循環(huán), 用局部變量記錄已選的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()都是新的變量, 還要循環(huán)幾次, 但換成全局變量, 每次進入, flag的值都是繼續(xù)上次操作的值, 那么能夠降低循環(huán)的次數(shù)了. 針對該部分做改動, 例如以下:
<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>這樣效果是一樣的, 但循環(huán)就少一次.
轉載于:https://www.cnblogs.com/gccbuaa/p/6930913.html
總結
以上是生活随笔為你收集整理的JS在页面限制checkbox最大复选数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 支付宝 报错 rsa_private r
- 下一篇： 〖Demo〗-- HAproxy配置文件