Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例
2024-09-21 07:35:40
<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);
})
最新文章
- mybatis-缓存1
- Sql Server 按行处理表数据思路
- unfortunately launcher has stopped
- GDC 2016 神秘海域4中使用Substance制作Texture
- PgSQL &#183; 特性分析 &#183; 谈谈checkpoint的调度
- Echarts-地图扩展-标准geoJson格式扩展地图-例子
- 快递鸟电子面单API对接方法?
- 自定义Dialog,实现由下而上的弹出效果(模仿QQ退出等)
- 面试经验And总结
- 【django基础】
- JS 实现的年月日三级联动
- strtol详解
- git 强制推送
- Python之函数--命名空间、作用域、global、nonlocal、函数的嵌套和作用域链
- Python3基础 list insert 在指定位置挤入一个元素
- ES6的新API如Promise,Proxy,Array.form(),Object.assign()等,Babel不能转码, 使用babel-polyfill来解决
- arcgis 属性表字段值计算
- 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
- Alpha冲刺——事后诸葛亮
- HDU 4301 Divide Chocolate (DP + 递推)
热门文章
- UI之UItableView重用机制的性能问题
- HW3.14
- ios 免书籍入门站点
- storm的特性
- 【原】用PHP搭建基于swoole扩展的socket服务(附PHP扩展的安装步骤及Linux/shell在线手册)
- 【转】Vim 常用命令总结
- fileupload控件上传、文件下载
- java 日志技术汇总(log4j , Commons-logging,.....)
- UIImage的使用
- 分布式存储Ceph的几种安装方法,源码,apt-get,deploy工具,Ubuntu CentOS