手机
当前位置:查字典教程网 >编程开发 >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实现表格行上下移动和置顶效果

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

js实现发送验证码后的倒计时功能

jQuery实现返回顶部功能

jQuery使用zTree插件实现树形菜单和异步加载

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

基于JavaScript实现动态添加删除表格的行

jQuery实现表格行上移下移和置顶的方法

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

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

精品推荐
分类导航