实现复选框全选，反选及获取选中的值；

代码如下：

<!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. django 之模板层

    1. 模板语法之变量 格式:{{ 变量名 }} 句点符,深度查询(可以点到方法,不要加括号,只能是无参的方法) 代码 视图函数: from django.shortcuts import render ...

  2. vue/cli3引入cesium

    vue/cli3引入cesium 一开始用了webpack结合vue引入vue:结果是各种bug,搞了半天.最后问了基友,发现vue脚手架这个·简单高效的方法,只需要几行代码就轻松地搞定啦! 方案一. ...

  3. java 并发——volatile

    java 并发--volatile 介绍 维基百科: volatile 是一个类型修饰符(type specifier).volatile 的作用是确保本条指令不会因编译器的优化而省略,且要求每次直接 ...

  4. Django框架（二十三）—— Django rest_framework-解析器

    解析器 一.解析器的作用 根据请求头 content-type 选择对应的解析器对请求体内容进行处理,将传过来的数据解析成字典 二.使用解析器 1.局部使用 在视图类中重定义parser_classe ...

  5. WPF 动态添加控件以及样式字典的引用(Style introduction)

    原文:WPF 动态添加控件以及样式字典的引用(Style introduction) 我们想要达到的结果是,绑定多个Checkbox然后我们还可以获取它是否被选中,其实很简单,我们只要找到那几个关键的 ...

  6. java获取网页源代码并写入本地文件中

    import java.io.*; import java.net.*; public class URLDemo { public static void main(String args[]){ ...

  7. python基础和编程库

    Python编程从入门到实践-------基础入门 1.Python中的变量 2.Python首字母大写使用title()方法,全部大写upper()方法,全部小写lower()方法 3.Python ...

  8. 常见条码类型介绍（Code 39、Code 128、EAN-8、EAN-13、EAN-128、ISSN、TIF、TIF-14、UPC(A)、UPC(E)）

    常见条码类型,如下: 1.Code 39 Code 39,又称为"Code 3 of 9",是非零售市场中最常用的格式,用于盘存和跟踪.Code 39码编码规则简单,误码率低.所能 ...

  9. jQuery, js 验证两次输了密码的一相同

    <div class="form-group"> <label class="col-sm-2 control-label font"> ...

  10. java EE学习流程（第二版更新）

    这周有点堕落了,这两天啥都没写,就顾上刷<庆余年>了