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的寫法 ,其中

  1. 第12行為取得表單元件名稱為 name 的checkbox項目的總數 ,以往我們會設定固定的數值,但是若核選項為動態的 ,則固定寫死的方式便不適用 ,因此透過 length 取得總數.
  2. 第13行為建立儲存使用者核選總數累加值得整數變數
  3. 第15行到第19行則為透過 document.form1.name[i].checked 逐一清查每一個核選項是否已經核選 ,若核選,則累加1
  4. 最後第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的動作.

 

 

 


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 Frank 的頭像
    Frank

    經驗交流分享與備忘

    Frank 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄