Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例
<input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ID="rptShopList" runat="server" OnItemDataBound="rptShopList_OnItemDataBound"> <ItemTemplate> <input name="chk" type="checkbox" /></li> </ItemTemplate> </asp:Repeater>
$(function () { //获取全选按钮,单选按钮的集合 var $all = $("#chkAll"), $chks = $("input[name='chk']"); $all.click(function () { $chk.prop("checked", this.checked); }); $chk.click(function () { $all.prop("checked", $chks.length == $chks.filter(":checked").length ? true : false); }); });
如果要获取勾选的值,代码如下:
var chks = ""; $(function(){ var $all = $("#chkAll,#chkAll2"), $chk = $("input[name='chk']"); $all.click(function () { chks = "";//每次勾选时。需要清空之前勾选项的值,以免chks中出现重复值 $chk.prop("checked", this.checked); $all.prop("checked", this.checked); $("input[name='chk']:checked").each(function () { chks += $(this).val() + ",";//设置勾选项的值集合,以“,”隔开 }) }); $chk.click(function () { chks = ""; var $chks = $("input[name='chk']"); $all.prop("checked", $chks.length == $chks.filter(":checked").length ? true : false); $("input[name='chk']:checked").each(function () { chks += $(this).val() + ","; }) }); });
Jquery控制全选与取消全选,单独一个一个取消勾选全部子项,“全选”按钮也不勾选,但若单独一个一个勾选全部子项,则“全选”按钮也勾选.
设置某项勾选但不可编辑,例子如下:
Repeater中: <input id="chk" name="chk" type="checkbox" value='<%#Eval("ShippingAddressID") %>|<%#Eval("IsDefault") %>' />//ShippingAddressID是编号,IsDefault是否是默认的 var $chk = $("input[name='chk']"); $chk.each(function () { if ($(this).val().split('|')[1] == "True") { $(this).attr("checked", true);//将默认收货地址勾选 $(this).attr("disabled", true);//设为不可编辑 $(this).attr("title", "默认收货地址");//添加提示文字 } else $(this).attr("checked", false); })