Question,
I have any question about checkbox, if I have 10 checkboxes in my form, and I want to limit my visitors cannot select more than 3 checkboxes, what can I do and how to write the JavaScript? Please let me know.
如何透過 javascript 限制核選box的核選數量 ,並且執行判斷的動作?
Ans,
這樣的問題 ,您可以參考以下的範例達成需求.
假設 ,今天要建立一個投票選項 ,票選對 中華民國 最有貢獻的政治人物 ?
為了有效統計票數 ,程式將限制再送出投票之前 ,必須至少選擇一位候選人
並且 ,最多單次只能選取三位候選人
當表單驗證核選項目的選取都正確時 ,便可以加上儲存投票資訊到資料庫 之類的程式碼 .
這裡使用最簡單的彈出式對話視窗 ,做為提示使用者選取成功的回應.
要達成以上的需求 ,只要先在表單頁面佈署多個合選框 ,並且加上javascript程式碼, 及 onsubmit() 事件
讓表單成是在執行action 之前 ,就先透過 onsubmit 事件呼叫這裡所預先定義的 chkCheckBox() 函式
值得注意的地方是 ,相同核選項目的名稱必須是相同的 ,如下圖直的長方型選取區塊所標示的位置
並且 ,請在html原始碼的 <head> </head> 標籤範圍裡 ,插入 chkCheckBox() function.
function的寫法概如下 ,請參考 :
上圖為 chkCheckBox() function的寫法 ,其中
- 第12行為取得表單元件名稱為 name 的checkbox項目的總數 ,以往我們會設定固定的數值,但是若核選項為動態的 ,則固定寫死的方式便不適用 ,因此透過 length 取得總數.
- 第13行為建立儲存使用者核選總數累加值得整數變數
- 第15行到第19行則為透過 document.form1.name[i].checked 逐一清查每一個核選項是否已經核選 ,若核選,則累加1
- 最後第21行到第26行 ,則判斷累加值得條件 ,如核選總數超過三個 ,則在第22行的位置透過alert()函式跳出對話視窗 ,告知使用者表單已經超出範圍.
眼尖的讀者可能會發現 ,表單的 action 是空白的 ,因為透過 onsubmit() 事件執行表單check的動作 ,除非在check的javascript函式加上中斷,否則當check javascript函式執行完成時 ,仍然會繼續執行 表單的 action 指令.
通常筆者個人的慣用的做法 ,都是在 check 函式的, 加上判斷, 只要判斷皆無誤 ,則在執行 action 的動作. 如下範例 ,請參考:
document.form1.action = "abc.php?action=sendpoll";
document.form1.submit();
如此, 就能確認表單資料都驗證無誤後 ,才執行submit的動作.
留言列表
Banana-Pi, 樹梅派應用 
