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 ...
随机推荐
- upc组队赛14 Evolution Game【dp】
Evolution Game 题目描述 In the fantasy world of ICPC there are magical beasts. As they grow, these beast ...
- Money
/** * www.yiji.com Inc. * Copyright (c) 2012 All Rights Reserved. */package com.yjf.common.lang.util ...
- vi 常用的命令
1.vi的两种模式:命令模式.输入模式 2.vi命令 2.1 vi 进入vi的一个临时缓冲区,光标定位在该缓冲区第1行第1列的位置上 2.2 vi file1 如果file1文件不存在,将建立此文件 ...
- node层设置proxy不生效的原因
43服务器上pm2部署的项目,原本是想请求代理到69服务器,但是仍然代理到75服务器了,检查node层proxy代码没问题,原因是端口号被占用了,项目的5000端口被其他项目占用,5000端口实际用的 ...
- svnadmin - Subversion 仓库管理工具
SYNOPSIS 总览 svnadmin command /path/to/repos [options] [args] OVERVIEW 概述 Subversion 是一个版本控制系统,允许保存旧版 ...
- word2vec 原理浅析 及高效训练方法
1. https://www.cnblogs.com/cymx66688/p/11185824.html (word2vec中的CBOW 和skip-gram 模型 浅析) 2. https://ww ...
- 第九章 Service
2019-09-23 今天距离2020年刚好有一百天,希望在未来的百日里能不负期待 不忘初心,方得始终, 初心易得,始终难守. 一.Service 的概念 Kubernetes Service定义了这 ...
- Codeforces 747F Igor and Interesting Numbers DP 组合数
题意:给你一个数n和t,问字母出现次数不超过t,第n小的16进制数是多少. 思路:容易联想到数位DP, 然而并不是...我们需要知道有多少位,在知道有多少位之后,用试填法找出答案.我们设dp[i][j ...
- css负边距之详解(子绝父相)
来源 | http://segmentfault.com 原文 | The Definitive Guide to Using Negative Margins 自从1998年CSS2作为推荐以 ...
- vue 使用Better－Scroll
注意点 1. 外层容器wrapper要设置高度,并且overflow:hidden. 2. wrapper里面的需要一个div包裹所有内容 3. 样式成功 4. 以上就是可以滚动的情况,wrappe ...