觸發checkbox的click事件時遇到的問題
因一些原因要實現checkbox的單選，實現的方法是當選中一個checkbox時，用jQuery選擇除這個剛選中的checkbox外所有已經被選中的checkbox，然后觸發其click事件（因為每個checkbox狀態改變時要處理一些問題，所以不能直接將其checked狀態改為false），但卻莫名其妙地進入了無限循環．
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled Page</title>
<script language="javascript" src="jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript">
$(function() {
$(':checkbox').click(function(){
alert($(this).attr('checked'));
});
$(':checkbox').click(function(){
if($(this).attr('checked')){
$(':checkbox:checked').not(this).click();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type='checkbox' id='cbx'/>
<input type='checkbox' id='cbx2'/>
</div>
</form>
</body>
</html>
當cbx已被選中再點擊cbx2時，首先會先執行cbx2綁定的第一個click函數，其輸出為true，說明當單擊時先反轉checkbox的狀態，然后再觸發其事件函數，所以在綁定的第二個click函數中，if條件判斷為真，所要執行：
$(':checkbox:checked').not(this).click();
這句代碼選中除剛單擊的這個checkbox外的已被選中的checkbox，在這個例子中只有cbx，觸發其click事件，如果按照前面所說的先反轉其狀態再觸發事件函數，則執行過程應該是：
執行cbx綁定的第一個click函數，輸出false；
執行cbx綁定的第二個click函數數，if條件判斷為假，執行完畢．
但實際情況卻是無限循環，一直觸發這兩個checkbox的click函數．如果不是先反轉狀態再觸發事件函數的話，則第一次在cbx2的click函數中if條件判斷就為假，也不會導致循環．研究半天，終于搞清狀況：
如果用鼠標點擊或在其獲得焦點時按空格，會先反轉其狀態再觸發其click事件；
而如果通過jQuery用代碼觸發其click事件，則會先觸發click事件再反轉狀態．
所以如果想實現開始所說的功能的話，只需麻煩一點，先手動改變checked狀態為false，然后再觸發click事件，而觸發click事件后狀態再次改變，由false變為true，所以要再次手動改變checked狀態：
$(':checkbox:checked').not(this).attr('checked',false).click().attr('checked',false);
浙公網安備 33010602011771號