2010-01-12 87 views
0

你好,這是我的複選框jQuery的複選框問題

<table cellpadding="0" cellspacing="0" border="1" bordercolor="red" width="100%" > 
<tr><td width="50%"><input type="checkbox" name="businessTypeGroup" id="chkAll" value="0" >All</TD><TD><input type="checkbox" name="businessTypeGroup" id="chkBuyer" value="1">Buyer/Importer</td></tr> 
<tr><td><input type="checkbox" name="businessTypeGroup" id="chkSeller" value="2">Seller/Exporter/Manufacturer</TD><TD><input type="checkbox" name="businessTypeGroup" id="chkService" value="3">Service Provider</td></tr>       
<tr><td><input type="checkbox" name="businessTypeGroup" id="chkDistributor" value="4">Distributor</td><td><input type="checkbox" name="businessTypeGroup" id="chkSupplier" value="5">Supplier</TD></tr> 
<tr><td colspan="2"><input type="checkbox" name="businessTypeGroup" id="chkTrading" value="6">Trading Company&nbsp;<span id="businessTypeGroupError"></td></tr> 
</table> 

按照此代碼一個塞納里奧不工作 1]嘗試檢查其他複選框不能夠檢查所有

$("input:checkbox[name='businessTypeGroup']").click (function(){ 
$("input:checkbox[name='businessTypeGroup']").click (function(){ 
var totalCheckboxes = $("input:checkbox[name='businessTypeGroup']").length;   
var checkedCheckboxes = $("input:checkbox[name='businessTypeGroup']:checked").length; 
    if (totalCheckboxes === checkedCheckboxes){    
     $("#chkAll").attr("checked" , true); 
    }else{ 
     $("#chkAll").attr("checked" , false); 
    } 
    }); 
}); 

$("#chkAll").click (function(){ 
    $("input:checkbox[name='businessTypeGroup']").attr ("checked" , $(this).attr("checked")); 
}); 
+0

您正在點擊分配中丟失一些錯字 - 右大括號 – 2010-01-12 10:46:29

+0

這是因爲我改變了您的HTML。 – rahul 2010-01-12 12:40:22

回答

11

使用的ID複選框,然後使用上面的方法,因爲#是一個id選擇器。

,或者您可以使用

$(function(){ 
    $("input:checkbox[name='businessTypeGroup']").click (function(){ 
     alert("test"); 
    }); 
}); 

attributeEquals selector

編輯

$(function(){ 
    $("input:checkbox[name='businessTypeGroup']").click (function(){ 
     $("#chkAll").attr ("checked" , false); 
}); 

$("#chkAll").click (function(){ 
    $("input:checkbox[name='businessTypeGroup']").attr ("checked" , $(this).attr ("checked")); 
    }); 
}); 

<input type="checkbox" id="chkAll" value="0" >All 
<input type="checkbox" id="chkBuyer" name="businessTypeGroup" value="1" >Buyer/Importer 
<input type="checkbox" id="chkSp" name="businessTypeGroup" value="2" >Service Provider 
<input type="checkbox" id="chkSupp" name="businessTypeGroup" value="3" >Supplier 

Working Demo

Another demo

這將所有選中複選框,當所有其他複選框被選中。如果有人未選中,則所有複選框都將被取消選中。

+0

請記住保留name屬性,以便發佈值。 (我不完全確定,這是必要的,但它總是指定輸入類型的名稱=「複選框」。) – 2010-01-12 10:46:08

+0

仍然有問題,當我嘗試取消全選複選框。它不能正常工作 – Vicky 2010-01-12 11:02:59

+0

我的實際需求是 1]當我檢查全部它將檢查所有複選框。 2]當我取消選中全部時,它將取消選中所有複選框。 3]當全部選中並取消選中任何其他選項時,它將取消選中全部複選框。 – Vicky 2010-01-12 11:07:57