checkbox : O3noBLOG

01月 16日

昨天發表了一篇很沒誠意的jQuery 1.1發佈的文章，是因為在研究checkbox的行為，因為想要用jQuery來抓checkbox和radio的值，radio還算簡單：

$("input[@name=fieldname][@checked]").val();

這樣一行就可以了，checkbox基本上也可以如法炮製，不過會遇到問題，可能有複數個checkbox的name屬性一樣，像是：

<input type="checkbox" name="pet" value="1"/>
<input type="checkbox" name="pet" value="2"/>
<input type="checkbox" name="pet" value="4"/>

這段HTML裡面有三個checkbox，他們的欄位名稱都是pet，但是值不一樣。假設全部都勾選，送出之後在HTTP header裡面會像是：

pet: 1
pet: 2
pet: 3

眼尖的人就會發現，在大部分的程式語言中，這樣會變成是重複宣告變數，後宣告的值會取代先宣告的值，以PHP為例，在後端程式收到的事實上等於只有$_POST['pet'] = 4;這個值，所以通常PHP程式設計師都會把checkbox的欄位名稱改成pet[]，變成：

<input type="checkbox" name="pet[]" value="1"/>
<input type="checkbox" name="pet[]" value="2"/>
<input type="checkbox" name="pet[]" value="4"/>

這樣後端程式會變成收到一個陣列$_POST['pet'] = array(1,2,4);，其他後端程式語言會變成怎樣我比較不清楚，不過別忘了我是想用jQuery來取值，我努力了一個晚上，結果還是只能用一個function來處理，還沒辦法縮成一行直接在程式碼裡使用：

function getCheckbox (name) {
	var val = [];
	$("input[@name="+name+"][@checked]").each(function(){val.push($(this).val());});
	return val;
}

至於這樣做的原因？是要用來作ajax的資料傳輸用，透過jQuery來傳送表單可以使用JSON作為參數的格式，並不影響後端程式。ajax的form serialize和deserialize加PHP的php-json加上ADOdb的AutoExcute，整個合起來超方便的:P。

最後補充，據說jQuery 1.1的選擇器（selector）的速度有大幅度的進步，快了10～20倍。

單篇彙整