实现复选框全选,反选及获取选中的值;

代码如下:

<!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 实现复选框全选、反选及获取选中的值的更多相关文章

  1. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  2. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

  3. Jquery表格变色 复选框全选,反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

  4. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. 复选框全选、全不选和反选的效果实现VIEW:1592

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  8. jQuery中的几个案例:隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  9. vue+vant-UI框架写的购物车的复选框全选和反选

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...

随机推荐

  1. 91、R语言编程基础

    1.查看当前工作空间 > getwd() ] "C:/Users/P0079482.HHDOMAIN/Documents" > 2.查看内存中有哪些对象 > ls ...

  2. python模块学习之testlink (自动回写测试案例执行结果到testlink)

    安装 pip install TestLink-API-Python-client #!/usr/bin/env Python # -*- coding: utf-8 -*- ''' Created ...

  3. 2019牛客多校第七场C-Governing sand(线段树+枚举)

    Governing sand 题目传送门 解题思路 枚举每一种高度作为最大高度,则需要的最小花费的钱是:砍掉所有比这个高度高的树的所有花费+砍掉比这个高度低的树里最便宜的m棵树的花费,m为高度低的里面 ...

  4. LeetCode N皇后 & N皇后 II

    题目链接:https://leetcode-cn.com/problems/n-queens/ 题目链接:https://leetcode-cn.com/problems/n-queens-ii/ 题 ...

  5. for in 的实现

    v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...

  6. ajaxfileupload上传文件出现SyntaxError:unexpected token <错误

    function ajaxFileUpload() { $.ajaxFileUpload ( { url: uri, secureuri: false, fileElementId: 'upFile' ...

  7. 转 笔记本无线和有线的MAC地址修改

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/xueqiang03/article/details/80741734无线网卡的mac地址在出厂时就被 ...

  8. 多线程实现奇偶统计v1 - 暴力版

    #include <stdio.h> #include <stdlib.h> #include <time.h> #include "pthread.h& ...

  9. PAT 乙级练习题1001 害死人不偿命的(3n+1)猜想 (15)

    1001. 害死人不偿命的(3n+1)猜想 (15) 卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去, ...

  10. Apache启动后出现You don't have permission to access on this server的解决办法

    安装好wampserver想在浏览器打开运行php的结果,发现: You don't have permission to access on this server 解决办法是: 在Apache的根 ...