<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery</title>

    <style>

    </style>

</head>

<body>

    选择喜欢的运动<input type="checkbox">全选

    <br/>

    <input type="checkbox" class="item">篮球

    <input type="checkbox" class="item">足球

    <input type="checkbox" class="item">羽毛球

    <input type="checkbox" class="item">冰棒球

    <br/>

    <button id="selectAll">全选</button>

    <button id="notSelect">全不选</button>

    <button id="reverseSelect">反选</button>

<script src="../js/vendor/jquery-3.2.1.min.js"></script>

<script>

    var $lis=$("[type=checkbox]:first")

    var $items=$(".item");

    $("#selectAll").click(function(){

        $items.prop("checked",true);

        $lis.prop("checked",true);

    });

    $("#notSelect").click(function(){

        $items.prop("checked",false);

        $lis.prop("checked",false);

    });

    $("#reverseSelect").click(function(){

        $items.each(function(){

            this.checked=!this.checked;

        });

        $lis.prop("checked",$items.not(":checked").length===0)

    });

    $lis.click(function(){

        $items.prop("checked",this.checked);

    })

    $items.click(function(){

        $lis.prop("checked",$items.not(":checked").length===0)

    })

</script>

</body>

</html>

jquery实现复选框的全选、全不选、反选的更多相关文章

  1. 复选框（checkbox）、多选框

    1.需求分析 可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析 基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明,列 ...

  2. Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据

    原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...

  3. jQuery对复选框（checkbox)的全选，全不选，反选等的操作

    效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...

  4. jQuery实现checkbox（复选框）选中、全选反选代码

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  5. 复选框（checkox）全选、全不选、反选、获得选中项值的用例

    HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...

  6. 组合框里添加复选框的方法（使用勾选的假象，用图片代替而已，并非QT原生支持）

    组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...

  7. 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面

    <%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...

  8. checkbox复选框，如何让其勾选时触发一个事件，取消勾选时不触发

    <input type="checkbox" onclick="checkboxOnclick(this)" /> <script> f ...

  9. Java 多选框的全选、多选、反选（JQuery 实现）

    jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...

  10. 转载：Bootstrap之表格checkbox复选框全选

    转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...

随机推荐

  1. 基于Vue的WebApp项目开发（三）

    实现根组件通用的头部和底部样式 明白由webpack搭建起来的Vue项目的执行流程,那么就可以知道实现这个需要只要在根组件和入口文件上做“手脚”即可 <!--以后项目的根组件--> < ...

  2. Java软件编码规范要求

    1.一个类对应一个文件,文件名与类名保持一致 虽然一个“.java”源文件可以有多个类(不是内部类),但是不提倡那么写.

  3. C# 日期和时间的字符串表示形式转换为其等效的DateTime(stringToDateTime)

    一. 标准的日期和时间字符串转换 将日期和时间的字符串表示形式转换为其等效的DateTime对象是开发中很常见的类型转换,我们最常使用的方式是: // 如果s为null,抛出ArgumentNullE ...

  4. 第一课 PPT 所学内容总结

    制作PPT时要注意三要素即:图形,颜色搭配,字数适当. 感悟:制作一个好的PPT也并不需要华丽的画面.只需清晰的表达出自己想要表达的,就是一个好PPT.

  5. Python实例---游戏人生[类的学习]

    # -*- coding:utf-8 -*- # ##################### 定义实现功能的类 ##################### class Person: def __in ...

  6. Java 多态（接口）

    有两种意义的多态,一是操作名称的多态,即有多个操作具有相同的名字,但这些操作所接收的消息类型必须不同(方法重载).另一种多态是和继承有关的多态,是指同一个操作被不同类型对象调用时可能产生不同的行为(方 ...

  7. Alpha Scrum2

    Alpha Scrum2 牛肉面不要牛肉不要面 Alpha项目冲刺(团队作业5) 各个成员在 Alpha 阶段认领的任务 林志松:督促和监督团队进度.协调组内合作,前端页面编写,博客发布 林书浩.陈远 ...

  8. [转] linux下 /etc/profile、~/.bash_profile ~/.profile的执行过程

    分类: linux 2015-03-13 16:24 1572人阅读 评论(0) 收藏 举报linuxprofile关于登录linux时,/etc/profile.~/.bash_profile等几个 ...

  9. HDU 1079 Calendar Game （博弈论-sg）

    版权声明:欢迎关注我的博客,本文为博主[炒饭君]原创文章.未经博主同意不得转载 https://blog.csdn.net/a1061747415/article/details/32336485 C ...

  10. 包不包含__declspec(dllimport)的判定

    按照MSDN说明,当链接dll的导出函数时,只需要包含头文件和lib,__declspec(dllimport)修饰符不是必须的,但加上该修饰能使导出函数的调用效率更高.那么,究竟原因是什么? 不使用 ...