<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>全选全不选反选</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#selAll").click(function () { //":checked"匹配所有的复选框

                $("#div1 :checkbox").prop("checked", true); //"#div1 :checked"之间必须有空格checked是设置选中状态。如果为true则是选中fo否则false为不选中

            });

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

                $("#div1 :checkbox").prop("checked", false);

            });

            //理解用迭代原理each（function(){}）

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

                $("#div1 :checkbox").each(function () {

                    $(this).prop("checked",!$(this).prop("checked")); //!$(this).attr("checked")判断复选框的状态：如果选中则取反

                });

            });

        });

    </script>

</head>

<body>

<div id="div1">

    <input type="checkbox" />歌曲1<br />

    <input type="checkbox" />歌曲2<br />

    <input type="checkbox" />歌曲3<br />

    <input type="checkbox" />歌曲4<br />

    <input type="checkbox" />歌曲5<br />

    <input type="checkbox" />歌曲6<br />

    <input type="checkbox" />歌曲7<br />

    <input type="button" id="selAll" value="全选" />

    <input type="button" id="unselAll" value="全不选" />

    <input type="button" id="reverse" value="反选 " />

</div>

</body>

</html>

补充说明：

jQuery自从1.6+版本之后，对于checkbox、radio的attr("checked", true)这样的操作，已经替换为prop()方法了，具体可以参看1.6+版本之后的API

问题参考：jQuery实现复选框的全选/全不选，反选，提交

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

  1. jQuery学习(五)——使用JQ完成复选框的全选和全不选

    1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...

  2. js实现复选框的全选、全不选、反选

    js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...

  3. js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  4. 【jQuery】复选框的全选、反选，推断哪些复选框被选中

    本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...

  5. js实现复选框的全选、全不选和反选

    js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...

  6. Vue复选框的全选

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  7. 【JavaScript】实现复选框的全选、全部不选、反选

    以较为简洁的程序实现复选框的全选.全部不选.反选 操作. 并且将可变的部分设置为JS的参数,以实现代码复用. 全选和全不选 第一个参数为复选框名称,第二个参数为是全选还是全部不选. function ...

  8. 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...

  9. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

随机推荐

  1. 深入理解c语言_从编译器的角度考虑问题_纪念Dennis Ritchie先生

    开源中国: Dennis Ritchie教授过世了,他发明了C语言,一个影响深远并彻底改变世界的计算机语言.一门经历40多年的到今天还长盛不训的语言,今天很多语言都受到C的影 响,C++,Java,C ...

  2. JavaScript里的类和继承

    JavaScript与大部分客户端语言有几点明显的不同: JS是 动态解释性语言,没有编译过程,它在程序运行过程中被逐行解释执行JS是 弱类型语言,它的变量没有严格类型限制JS是面向对象语言,但 没有 ...

  3. App.config提示错误“配置系统未能初始化”

    解决: "如果配置文件中包含 configSections 元素,则 configSections 元素必须是 configuration 元素的第一个子元素." 所以它前面如果有 ...

  4. 在SQL2005实现维护计划-备份数据库

    一.備份數據庫維護計劃方案 [注]: 1.先啟動SQL Server Agent服務 2..交易記錄備份 (只限於完整和大量記錄復原模式). 3.下面中”清除備份trn文件” & “清除備份日 ...

  5. IIS7配置https

    To Install an SSL Certificate in Microsoft IIS 7 Click Start, mouse-over Administrative Tools, and t ...

  6. extjs获得store数据

    var json = new Array(); for (var i = 0; i < storeEditFee.getCount(); i++) { json.push(storeEditFe ...

  7. 【CSS】Beginner4:Text

    1.alter the size and shape of the text 2.font-family:Arial, Verdana,"Times New Roman",helv ...

  8. javaNIO（转载）

    (一) Java NIO 概述 Java NIO 由以下几个核心部分组成: Channels Buffers Selectors 虽然Java NIO 中除此之外还有很多类和组件,但在我看来,Chan ...

  9. C# WinForm修改Panel边框颜色

    private void panel1_Paint(object sender, PaintEventArgs e) { ControlPaint.DrawBorder(e.Graphics, thi ...

  10. SQL SERVER全面优化

    今天我们从语句的一些优化写法及一些简单优化方法做一个介绍.这对于很多开发人员来说还是很有用的!为了方便阅读给出前文链接: SQL SERVER全面优化-------Expert for SQL Ser ...