手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery实现表格与ckeckbox的全选与单选功能
jQuery实现表格与ckeckbox的全选与单选功能
摘要:先给大家介绍下jQuery实现表格与ckeckbox的全选与单选功能。先看看下面的效果:用户点击头的checkbox时,所有表格数据行的ch...

先给大家介绍下jQuery实现表格与ckeckbox的全选与单选功能。

先看看下面的效果:

jQuery实现表格与ckeckbox的全选与单选功能1

用户点击头的checkbox时,所有表格数据行的checkbox全选或反选。

当数据行某一行没有选中时,头checkbox去选。当所有数据行的checkbox全选时,头的checkbox也选上。

html代码示例,关注高亮部分即可:

jQuery实现表格与ckeckbox的全选与单选功能2

jQuery代码,可以参考如下:

jQuery实现表格与ckeckbox的全选与单选功能3

PS:js实现隐藏与显示铵钮功能

表格无数据行时,隐藏下面两个铵钮,反之显示它们,如下面代码示例:

jQuery实现表格与ckeckbox的全选与单选功能4

jQuery代码:

jQuery实现表格与ckeckbox的全选与单选功能5

看看效果:

jQuery实现表格与ckeckbox的全选与单选功能6

【jQuery实现表格与ckeckbox的全选与单选功能】相关文章:

jquery判断至少有一个checkbox被选中的方法

jQuery插件实现适用于移动端的地址选择器

Javascript实现每日自动换一张图片的方法

js实现简单锁屏功能实例

jQuery实现表格行上下移动和置顶效果

JQuery勾选指定name的复选框集合并显示的方法

jQuery zTree加载树形菜单功能

jQuery实现页面内锚点平滑跳转特效的方法总结

js实现简单div拖拽功能实例

jQuery实现将页面上HTML标签换成另外标签的方法

精品推荐
分类导航