使用jquery实现复选框的全选和获取选择值得功能,实现效果如下图所示:
3条回答 默认 最新
- 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
嘿嘿!请多指教 2021-11-30 14:47最佳回答 专家已采纳<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(function () { //用id选择器获取button组件,这里可以用其他选择器,如class为. id为# 等。详情看jQuery官网 $("#selectAll").click(function () { //设置选择框选中为true $("input[type='checkbox']").prop("checked", true); }); var aa=""; $("#getVal").click(function () { $("input[type='checkbox']:checkbox:checked").each(function(){ aa+=$(this).val() }) }) console.log(aa) }); </script> </head> <body> <input type="checkbox" value="足球"/>足球 <input type="checkbox" value="篮球"/>篮球 <input type="checkbox" value="羽毛球"/>羽毛球 <input type="checkbox" value="乒乓球"/> <br> <input type="button" id="selectAll" value="全选"> <input type="button" id="getVal" value="获取"> </body> </html>
采纳该答案 已采纳该答案 专家已采纳评论解决 1 无用打赏举报 编辑记录微信扫一扫
分享评论登录 后可回复...
查看更多回答(2条)
报告相同问题?
提交
相关推荐 更多相似问题
- 2021-11-30 14:36回答 3 已采纳 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script
- 2015-12-28 08:31回答 3 已采纳 分页?自己用个全局遍历记录所有选中的记录才行,分页后调用getChecked只能获取当前页的
- 2022-04-23 16:34回答 1 已采纳 $("input[name='ck1']:checkBox").change(function(){ var allCheck=true; $("input[n
- 2020-11-24 03:56本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法。分享给大家供大家参考,具体如下: 先来看看JavaScript实现checkbox复选框全选/全不选的方法。这应该是一个比较实用的前端技巧吧,很多时候我们都...
- 2019-07-10 11:51jQuery实现复选框checkbox的全选与反选功能,不用多介绍了吧,以往都是基于纯js的实现比较多,这个是引入了jquery,或许更能满足现在的前端设计吧。
- 2022-03-17 20:14一只代码小白啦啦啦的博客 jquery:实现复选框的一键全选,一键取消全选 //一键全选,一键取消全选 $("#checkboxAll").click(function () { alert(this.checked) /*if (this.checked==true){ $("#tBody input[type='checkbox']")....
- 2009-06-24 13:53回答 4 已采纳 [code="js"] 全 选 反 选 Ite
- 2017-08-21 08:49回答 3 已采纳 已经解决了。grid.getSelectionMode().selectAll() 就可以了。
- 2021-08-25 19:01回答 3 已采纳 $(".j-checbox:checked").length一直是0
- 2020-11-26 20:151、第一个复选框选中或取消选中,则下面的复选框为全选或取消全选; 2、当下面的复选框全部选中时,则将第一个复选框设置为选中,当下面的复选框中有一个没有被选中时,则第一个复选框取消选中; 3、将下面的复选框...
- 2022-03-16 11:08再※见了&单纯,!的博客 判断选中的复选框长度是否等于复选框的总长度, 如果相等就将全选框改为选中状态*/ if (len == checked_len) { $('.kcnr .checkall').prop('checked', true) } else { $('.kcnr .checkall').prop('checked', false) ...
- 2022-03-17 13:51再※见了&单纯,!的博客 实现多个表格的复选框功能, HTML+CSS部分 <style> .kctc-table tbody { width: 1180px; background-color: #fff; } .kctc-table tbody tr { width: 1180px; display: flex; } .kctc-table thead {...
- 2021-11-28 20:32回答 1 已采纳 题主可以参考下我之前写的,原生,jquery的都有https://ask.csdn.net/questions/7507051
- 2021-09-17 11:36回答 1 已采纳 var allCheck = false; $("button[value='全选']").click(function (){ allCheck = !allCheck; $("i
- 2017-08-07 02:20回答 5 已采纳  如果是选中的 你再这两个地方 console一下 他
- 2020-08-09 09:41小小大侠客的博客 在做前端开发时,经常会遇到对复选框的全选或全不选,本文主要探讨JQuery实现方式。 第二、下载JQuery开发包 第二、代码示例 <%@ page contentType="text/html;charset=UTF-8"%> <%@taglib prefix="c" uri=...
- 2017-09-13 21:25尤成军军军的博客 源代码 <script type="text/javascript" src="jquery-1.7.1.min.js"> $(document).ready(function(){
- 2020-12-10 19:24最近在重构一个复选框组件,原型是select2这个jQuery插件, 有兴趣的可以去搜下,封装的很好,但是并不能满足业务所有需求,最要命的是jquery插件这种以dom驱动数据的库,并不能和vue和angular这种数据驱动dom的框架...
- 2022-01-04 15:20回答 4 已采纳 参考下这个https://www.cnblogs.com/fengyulv/p/10313169.html
- 2020-12-28 16:02(1)实现全选框勾选时其他复选框全部选中,全选框取消勾选时其他 复选框全部取消选中 (2)当复选框有取消选中时,全选框也要取消勾选 2.HTML部分 <thead><tr>学生信息表</th></tr> <input type=...
- 没有解决我的问题, 去提问