這篇文章會說明如何透過jQuery來進行核取方框的表單驗證功能，如果沒有任何一個核取方框被勾選，則顯示警告，並且無法提交表單。
HTML語法撰寫
這裡我們使用jQuery：製作全選和取消全選核取方框的語法裡面所撰寫的表單，長相像這樣：
HTML語法如下：
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<label>
<input type="checkbox" name="CheckAll" value="核取方塊" id="CheckAll" />
全選以下</label>
<br />
------------------<br />
</p>
<p>
<label>
<input type="checkbox" name="Checkbox[]" value="核取方塊" id="CheckboxGroup1_0" />
機車</label>
<br />
<label>
<input type="checkbox" name="Checkbox[]" value="核取方塊" id="CheckboxGroup1_1" />
腳踏車</label>
<br />
<label>
<input type="checkbox" name="Checkbox[]" value="核取方塊" id="CheckboxGroup1_2" />
公車</label>
<br />
<label>
<input type="checkbox" name="Checkbox[]" value="核取方塊" id="CheckboxGroup1_3" />
捷運</label>
</p>
<input type="submit" name="button" id="button" value="送出" />
<br />
</p>
</form>
</body>
jQuery語法撰寫
$("#button").click(function(){
var check=$("input[name='Checkbox[]']:checked").length;//判斷有多少個方框被勾選
if(check==0){
alert("您尚未勾選任何項目");
return false;//不要提交表單
}else{
alert("你勾選了"+check+"個項目");
return true;//提交表單
}
})
在這段語法中，當網友點擊送出（id = buttom）時
1. 我們會先判斷有多少個核取方框被勾選，寫法是input[name="表單名稱"]:checked，透過這樣的語法，我們可以選擇被勾選的核取方框，後面再加上.length，則可以判斷有多少個方框被勾選。
我們把這個值存成一個變數，叫做check。
2.如果沒有任何被勾選（check==0），則不要提交表單（return false），否則才可以提交。
參考資料
0 意見:
張貼留言