HTML部分:

<div class="all">    <ul>        <li><input type="checkbox" value="图书" /><sapn>图书</sapn></li>        <li><input type="checkbox" value="动漫" /><sapn>动漫</sapn></li>        <li><input type="checkbox" value="电影" /><sapn>电影</sapn></li>        <li><input type="checkbox" value="小说" /><sapn>小说</sapn></li>        <li><input type="checkbox" value="音乐" /><sapn>音乐</sapn></li>        <li><input type="checkbox" value="游戏" /><sapn>游戏</sapn></li>        <li><input type="checkbox" value="论坛" /><sapn>论坛</sapn></li>        <li><input type="checkbox" value="运动" /><sapn>运动</sapn></li>    </ul>    <form action="">        <input type="checkbox" value="全选">        <input type="button" value="全选">        <input type="button" value="全不选">        <input type="button" value="反选">        <input type="button" value="获得选中项的值">    </form></div>

JS部分://全选var num = 0;$(".all form input[value='全选']").click(function(){    num++;    if(num%2==0){        $(".all input[type='checkbox']").each(function(){            $(this).prop("checked",false);        })    }else{        $(".all input[type='checkbox']").each(function(){            $(this).prop("checked",true);        })    }});
//全不选$(".all form input[value='全不选']").click(function(){    $(".all input[type='checkbox']").each(function(){        $(this).attr("checked",false);    })});//反选$(".all form input[value='反选']").click(function(){    if ($(".all form input[value='全选']").is(":checked")== true){        $(".all input[type=checkbox]").prop("checked",false);    }else{        $(".all input[type=checkbox]").prop("checked",true);    }});//获得选中项的值$(".all form input[value='获得选中项的值']").click(function(){        var vals = [];        $(".all li input[type='checkbox']:checked").each(function(i,ele){                vals.push($(this).val());        });        alert(vals);})
												

复选框(checkox)全选、全不选、反选、获得选中项值的用例的更多相关文章

  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. 选中没有选中的复选框,匹配含有某个字符串的正则,json取值的两种方法,把变量定义在外面跟里面的区别

    一.筛选没有选中的复选框:not("input:checked") 二.匹配有VARCHAR的字符串:".*VARCHAR.*?" 三.json取值的两种方法 ...

  5. 组合框里添加复选框的方法(使用勾选的假象,用图片代替而已,并非QT原生支持)

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

  6. Jquery 1.8全选反选删除选中项实现

    JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...

  7. ASP.NET MVC中使用MvcPager异步分页+在分页中复选框下一页上一页也保持选中

    ASP.NET MVC 分页使用的是作者杨涛的MvcPager分页控件  地址:http://www.webdiyer.com/mvcpager/demos/ajaxpaging/ 这个分页控件在里面 ...

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

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

  9. checkbox 多选框 :jquery之全选、全不选、反选

    javascriptjqueryselectAll [html] view plaincopy   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

随机推荐

  1. uwp 图片切换动画

    最近在学习安卓,LOL自定义战绩项目近乎停工,而且腾旭把界面全改了,好烦.刚好学习到安卓中的图片切换动画,我就想在LOL项目中实现一个.首先上百度查看一下,妈的,资料少的可怜. 还是自己来吧.自定义控 ...

  2. HTML5系列:HTML5结构

    1. 主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,增加几个与页眉.页脚.内容区块等文档结构相关联的结构元素. 1.1 article元素 article元素表示文档.页面或应用程序中独 ...

  3. MySql 及 MySql WorkBench使用大全

    Mysql安装步骤 1. 下载MySQL Community Server 5.6.13 2. 解压MySQL压缩包 将以下载的MySQL压缩包解压到自定义目录下,我的解压目录是: "D:\ ...

  4. scikit-learn 和pandas 基于windows单机机器学习环境的搭建

    很多朋友想学习机器学习,却苦于环境的搭建,这里给出windows上scikit-learn研究开发环境的搭建步骤. Step 1. Python的安装 python有2.x和3.x的版本之分,但是很多 ...

  5. C# 插入或删除word分页符

    C# 插入或删除word分页符 分页符是word中常用的一种分页的符号,它标志着上一页的结束和下一页的开始.在word中分页符有两种,一种是自动分页符,也叫软分页符,即一页数据写满以后转到下一页时wo ...

  6. android studio 导入有so 文件的项目是,程序崩溃的可能原因

    被这玩意坑了2个多小时. ----------------------------------- 由于 android studio 在建项目时,不会自动识别 so 文件,所以在含有so 文件的项目中 ...

  7. hibernate笔记--通过SchemaExport生成数据库表

    方法比较简单,项目中只需要两个java类(一个实体类,如User,一个工具类),两个配置文件(hibernate必须的两个配置文件hibernate.cfg.xml,与User.hbm.xml),即可 ...

  8. 到处都是坑的微信支付V3之 微信支付回调页面

    据上次 到处都是坑的微信支付V3 后很多园友在被虐了千百遍后终于跳转到了亲切的微信支付界面,但输入密码支付后却不知道怎么处理了,接下来补上支付后的处理流程. 1. html中根据前台支付后反馈信息成功 ...

  9. OpenCV2:特征匹配及其优化

    在OpenCV2简单的特征匹配中对使用OpenCV2进行特征匹配的步骤做了一个简单的介绍,其匹配出的结果是非常粗糙的,在这篇文章中对使用OpenCV2进行匹配的细化做一个简单的总结.主要包括以下几个内 ...

  10. HTML基本元素(一)

    HTML基本元素(一) 1.换行符 <br /> Ps:br 是换行(Break)的缩写,文本会在这个标签的地方换行. 实例: 第一行<br />第二行 2.段落 <p& ...