DIV CSS 佈局教程網

在一些網頁應用中，就比如在投票系統中，當我們進行的是多項投票時，我們要求用戶最多只能選擇幾項進行投票，這也是就是說選擇復選框的個數最多幾個.

那麼如何設置這最多的幾個，我們就需要做些簡單的腳本處理。以下代碼均轉摘自互聯網，作者不詳。

比如如下的代碼則解決了相關問題：

<SCRIPT LANGUAGE="JavaScript"> <!-- //checkbox元素的名字前綴，本例為sample1,sample2,sample3... var sCtrlPrefix = "sample"; //checkbox元素數量，本例有10個； var iMaxCheckbox = 10; //設置最大允許選擇的數量； var iMaxSelected = 3; function doCheck(ctrl) { var iNumChecked = 0; var thisCtrl; var i; //初始化 i = 1; //循環直到選中了最多的checkbox; while ((i <= iMaxCheckbox) && (iNumChecked <= iMaxSelected)) { thisCtrl = eval("ctrl.form." + sCtrlPrefix + i); if ((thisCtrl != ctrl) && (thisCtrl.checked)) { iNumChecked++; } i++; } // 檢查是否達到了最大選擇數量； if (iNumChecked == iMaxSelected) { // 如果是則uncheck剛選擇的元素； ctrl.checked = false; ALERTXT="最多可選"+iMaxSelected+"個" alert(ALERTXT); } } // --> </SCRIPT> <form name="form" method="post"> <input type="CHECKBOX" name="sample1" onClick="doCheck(this)">A <input type="CHECKBOX" name="sample2" onClick="doCheck(this)">B <input type="CHECKBOX" name="sample3" onClick="doCheck(this)">C <input type="CHECKBOX" name="sample4" onClick="doCheck(this)">D <input type="CHECKBOX" name="sample5" onClick="doCheck(this)">E <input type="CHECKBOX" name="sample6" onClick="doCheck(this)">F <input type="CHECKBOX" name="sample7" onClick="doCheck(this)">G <input type="CHECKBOX" name="sample8" onClick="doCheck(this)">H <input type="CHECKBOX" name="sample9" onClick="doCheck(this)">I <input type="CHECKBOX" name="sample10" onClick="doCheck(this)">J </form>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

改代碼最需要注意的是


//checkbox元素的名字前綴，本例為sample1,sample2,sample3...
var sCtrlPrefix = "sample";


和


//checkbox元素數量，本例有10個；
var iMaxCheckbox = 10;


checkbox元素的名字前綴和元素數量與頁面中定義的稍有差錯腳本即失效。

故有如下腳本函數以通用：

<SCRIPT LANGUAGE="JavaScript"> var c=0,limit=3; function doCheck(obj) { obj.checked?c++:c--; if(c>limit)obj.checked=false,c--; } </SCRIPT> <form name="form" method="post"> <input type="CHECKBOX" name="sample1" onClick="doCheck(this)">A <input type="CHECKBOX" name="sample2" onClick="doCheck(this)">B <input type="CHECKBOX" name="sample3" onClick="doCheck(this)">C <input type="CHECKBOX" name="sample4" onClick="doCheck(this)">D <input type="CHECKBOX" name="sample5" onClick="doCheck(this)">E <input type="CHECKBOX" name="sample6" onClick="doCheck(this)">F <input type="CHECKBOX" name="sample7" onClick="doCheck(this)">G <input type="CHECKBOX" name="sample8" onClick="doCheck(this)">H <input type="CHECKBOX" name="sample9" onClick="doCheck(this)">I <input type="CHECKBOX" name="sample10" onClick="doCheck(this)">J </form>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

<SCRIPT LANGUAGE="JavaScript"> var c=0,limit=3; ALERTXT="最多可選"+limit+"個" function doCheck(obj) { obj.checked?c++:c--; if(c>limit)obj.checked=false,c--,alert(ALERTXT); } </SCRIPT> <form name="form" method="post"> <input type="CHECKBOX" name="sample1" onClick="doCheck(this)">A <input type="CHECKBOX" name="sample2" onClick="doCheck(this)">B <input type="CHECKBOX" name="sample3" onClick="doCheck(this)">C <input type="CHECKBOX" name="sample4" onClick="doCheck(this)">D <input type="CHECKBOX" name="sample5" onClick="doCheck(this)">E <input type="CHECKBOX" name="sample6" onClick="doCheck(this)">F <input type="CHECKBOX" name="sample7" onClick="doCheck(this)">G <input type="CHECKBOX" name="sample8" onClick="doCheck(this)">H <input type="CHECKBOX" name="sample9" onClick="doCheck(this)">I <input type="CHECKBOX" name="sample10" onClick="doCheck(this)">J </form>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]