jquery实现表格动态复选框的代码分享

本篇文章给大家分享的内容是jquery实现表格动态复选框的代码分享,有着一定的参考价值,有需要的朋友可以参考一下

效果如图
这里写图片描述

nbsp;html>                                    

        

                                    

登录后复制                

                                            

                        

姓名

                        

年龄

                                    

                                                                                                                                                                                                                                                                                                                                 $(function(){ //初始化 function initTable() { var checkAll = $('#checkAll'); var trs = $('tbody tr'); var tag = $('

'); trs.prepend(tag); //得到tbody中的所有选框. var checks = $('input[name=”checkitem”]'); //给全选框添加事件 checkAll.on('click',function(event){ if($(this).prop('checked') == false){ //全部取消 $('input[type=”checkbox”]').prop('checked',false); }else{ $('input[type=”checkbox”]').prop('checked',true); } }); //给每个单独的选择框加事件 $('tbody').on('click',function(event){ checks = $('input[name=”checkitem”]'); if (event.target.name == 'checkitem'){ if($(this).prop('checked') == false){ $(this).prop('checked',false); }else{ $(this).prop('checked',true); } //判断是否选满了 if(checks.length == $('tbody').find('input:checked').length){ checkAll.prop('checked',true); }else{ checkAll.prop('checked',false); } } }); } initTable(); //新增点击事件 $('#addTypeBtn').on('click', function () { var html = ''; html += '

'; html += '

' html += '

'; html += '

'; html += '

'; html += ''; var html = $(html) $('tbody').append(html); //取消全选 $('#checkAll').prop('checked',false); }); });

               

相关推荐:

js动态添加复选框&动态勾选对应的值

jQuery操作复选框checkbox技巧总结

以上就是jquery实现表格动态复选框的代码分享的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2774204.html

(0)
上一篇 2025年3月8日 14:04:52
下一篇 2025年3月3日 17:11:29

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 在jQuery里如何使用复合选择器

    这次给大家带来在jQuery里如何使用复合选择器,在jQuery里使用复合选择器的注意事项有哪些,下面就是实战案例,一起来看一下。 一 介绍 复合选择器将多个选择器(可以是ID选择器、元素选择或是类名选择器)组合在一起,两个选择器之间以逗号…

    编程技术 2025年3月8日
    200
  • ajax动态赋值数据图

    这次给大家带来ajax动态赋值数据图,ajax动态赋值数据图的注意事项有哪些,下面就是实战案例,一起来看一下。 本文以柱形图和饼形图ajax动态赋值为例 一、饼形图赋值步骤 (1)jsp页面 [html] view plain copy 登…

    编程技术 2025年3月8日
    200
  • anime.js做出动画复选框

    这次给大家带来anime.js做出动画复选框,anime.js做出动画复选框的注意事项有哪些,下面就是实战案例,一起来看一下。 anime.js anime.js是一个灵活的轻型JavaScript动画库。 它与CSS,个别变换,SVG,D…

    2025年3月8日 编程技术
    200
  • js和jquery如何实现自动加载图片(附代码)

    这次给大家带来js和jquery如何实现自动加载图片(附代码),js和jquery实现自动加载图片的注意事项有哪些,下面就是实战案例,一起来看一下。 一、JavaScript自动加载 ①在文本中用onload: 当页面中所有内容(包括图片)…

    编程技术 2025年3月8日
    200
  • jquery提交数组数据用springmvc接收的方法

    这次给大家带来jquery提交数组数据用springmvc接收的方法,jquery提交数组数据用springmvc接收的注意事项有哪些,下面就是实战案例,一起来看一下。 var selectedUsers = $(‘#users’).tag…

    编程技术 2025年3月8日
    200
  • vue中v-model动态使用详解

    这次给大家带来vue中v-model动态使用详解,vue中v-model动态使用的注意事项有哪些,下面就是实战案例,一起来看一下。 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器…

    编程技术 2025年3月8日
    200
  • JS自执行函数与jQuery扩展使用方法

    这次给大家带来JS自执行函数与jQuery扩展使用方法,JS自执行函数与jQuery扩展的注意事项有哪些,下面就是实战案例,一起来看一下。 我们通常将JS代码写在一个单独的JS文件中,然后在页面中引入该文件。但是,有时候引入后会碰到变量名或…

    编程技术 2025年3月8日
    200
  • JQUERY通过当前标签名获取属性的值

    这次给大家带来JQUERY通过当前标签名获取属性的值,JQUERY通过当前标签名获取属性值的注意事项有哪些,下面就是实战案例,一起来看一下。 废话不多说了,具体代码如下所示: /** JQUERY 通过当前标签属性名,获取属性的值 */ f…

    编程技术 2025年3月8日
    200
  • jQuery实现计时器功能详解

    这次给大家带来jQuery实现计时器功能详解,jQuery实现计时器功能的注意事项有哪些,下面就是实战案例,一起来看一下。 在写项目的过程中遇到要前端60秒发送验证码的业务需求,于是用到计时器的功能: setInterval(functio…

    编程技术 2025年3月8日
    200
  • jQuery自定义框并获取框内数据

    这次给大家带来jQuery自定义框并获取框内数据,jQuery自定义框并获取框内数据的注意事项有哪些,下面就是实战案例,一起来看一下。 jquery库: jquery -1.10.2.min.js,jQuery UI – v1.…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论