百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> 怎样使用jquery实现全选和全不选功效
分享文章到:

怎样使用jquery实现全选和全不选功效

发布时间:12/01 来源:未知 浏览: 关键词:

使用jquery实现全选和全不选功效的办法:第一引入jquery的库,并设定jquery的加载函数;然后按照id猎取全选框的元素,并给全选框绑定点击事件;最后猎取类属性值为checkOne的多选框。

本教程操纵环境:windows7系统、jquery3.2.1版本,该办法适用于所有品牌电脑。

引荐:jquery视频教程

使用jquery实现全选和全不选功效的办法:

1、创立一个html,然后在body标签增加如下图所示的代码,主如果在一个表格中包括多选框。

eb991adacd0f896958cb3fc22627de8.png

2、然后首要就是要引入jquery的库。留意jquery库的方式:<script src="js/jquery-1.8.3.js" ></script>不克不及写成

<script src="js/jquery-1.8.3.js" />这种方式。不然无效!大家可以去尝试一下这两个的差异。

html5可以不增加type="text/javascript"

5074fc4c41d99af2c945e30aa8349e5.png

3、然后再来一个jquery的加载函数,加载函数是jquery的标准配置。下面这种方式的话是属于比力简写的了。

165a81d68bf28a0309ec3c8fe43b357.png

4、接下来按照id猎取全选框的元素,然后给全选框绑定点击事件。

36dc056843ac272fac3a6564412c426.png

5、在点击事件办法中完成:猎取类属性值为checkOne的多选框;然后将通过prop(属性,值)办法,来将checked属性设定成跟全选/全不选框的checked一样。

00b687cbd3c221d6b22d2dc99cd3e3a.png

6、以上的步骤就完成了使用jquery来实现全选和全不选的功效了。我们通过阅读器来运转这个html来查看结果如下。

e574227b23df5506f48d7b7a67f83cd.png

相关学习引荐:js视频教程

以上就是怎样使用jquery实现全选和全不选功效的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板