jQuery 实现复选框全选、反选及获取选中的值
实现复选框全选，反选及获取选中的值；
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../src/js/jquery-1.11.3.min.js"></script> </head>
<body>
<div>
<p>选择要购买的水果</p>
<ul class="fruit">
<li><input type="checkbox" value="001"/>苹果</li>
<li><input type="checkbox" value="002"/>雪梨</li>
<li><input type="checkbox" value="003"/>芒果</li>
<li><input type="checkbox" value="004"/>菠萝</li>
</ul>
<button id="checkAll">全选</button>
<button id="noting">全不选</button>
<button id="reverseAll">反选</button>
<button id="checkValue">获取选中的值</button> </div>
<script !src="">
$(function () {
// 全选
$("#checkAll").on("click", function () {
$("input:checkbox").each(function () {
$(this).prop("checked", true);
})
})
// 全不选
$("#noting").on("click", function () {
$("input:checkbox").each(function () {
$(this).prop("checked", false);
})
})
// 反选
$("#reverseAll").on("click", function () {
$("input:checkbox").each(function () {
$(this).prop("checked", !$(this).prop("checked"));
})
})
// 获取选中的值
$("#checkValue").on("click", function () {
let arr = [];
$("input:checkbox:checked").each(function (i) {
arr[i] = $(this).val();
})
let str = arr.join(",");
console.log(str);
})
})
</script>
</body>
</html>
效果图：
获取到的值：
jQuery 实现复选框全选、反选及获取选中的值的更多相关文章
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- jQuery 前端复选框 全选 反选 下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
- Jquery表格变色 复选框全选，反选
/*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...
- jQuery实现复选框 全选、反选、全不选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 复选框全选、全不选和反选的效果实现VIEW:1592
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- jQuery中的几个案例：隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
- vue+vant-UI框架写的购物车的复选框全选和反选
购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...
随机推荐
- 9、继续matlab数值分析
1.matlab拉格朗日插值 function yi=Lagrange(x,y,xi) %x为向量,全部的插值节点 %y为向量,插值节点处的函数值 %xi为标量或向量,被估计函数的自变量: %yi为x ...
- The Preliminary Contest for ICPC Asia Shanghai 2019 （B L ）
B. Light bulbs 思路:差分 + 离散化, 好不容易懂了差分却没想到离散化,还是要罗老板出马..... AC代码: #include<bits/stdc++.h> using ...
- datetime中strptime用法
import datetime day20 = datetime.datetime.strptime('2020-01-01 0:0:0', '%Y-%m-%d %H:%M:%S')nowdate = ...
- 实习记——《Rethink》
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/gmszone/article/details/30045055 最终能够在和自己的电脑上写下这些字了 ...
- neo4j APOC与自定义存储过程环境搭建
neo4j APOC与自定义存储过程环境搭建 主要参考资料:APOC官网https://neo4j-contrib.github.io/neo4j-apoc-procedures/APOC介绍 PPT ...
- vue+Mint-ui实现登录注册
创建一个组件:注册组件 (register/index.vue.script.js.style.scss,register/header) 注册路由 router/index.js { path: ' ...
- swagger2.0与spring结合
官方文档: http://www.baeldung.com/swagger-2-documentation-for-spring-rest-api swagger是一个前后端api统一文档和测试框 ...
- 数据结构：堆（Heap）
堆就是用数组实现的二叉树,所有它没有使用父指针或者子指针.堆根据"堆属性"来排序,"堆属性"决定了树中节点的位置. 堆的常用方法: 构建优先队列 支持堆排序 快 ...
- dubbo-源码阅读之Filter实现原理
最近完成一个需求,使用阿里Arms需要在log里面加上traceId,但是发现dubbo异常 被ExceptionFilter捕获 并打印 打印不出traceI,然后百度搜索如何重写Filter 参 ...
- 封装加减乘除函数 解决JS 浮点数计算 Bug
计算机内部的信息都是由二进制方式表示的,即0和1组成的各种编码,但由于某些浮点数没办法用二进制准确的表示出来,也就带来了一系列精度问题.当然这也不是JS独有的问题. 例如, 我们在用JS做浮点运算会遇 ...