<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin:0;padding:0;}

        input{vertical-align:middle}

        .container{width:500px;margin:20px auto;}

    </style>

</head>

<body>

    <div class="container">

        <div class="top">

            <input type="checkbox" value="全选" id="all" class="all"/>

            <label for="all">全选</label>

        </div>

        <div class="down">

            <div class="con">

                <input type="checkbox" id="sel1" class="sel sel1"/>

                <label>选项1</label>

            </div>

            <div class="con">

                <input type="checkbox" id="sel2" class="sel sel2"/>

                <label>选项2</label>

            </div>

            <div class="con">

                <input type="checkbox" id="sel3" class="sel sel3"/>

                <label>选项3</label>

            </div>

            <div class="con">

                <input type="checkbox" id="sel4" class="sel sel4"/>

                <label>选项4</label>

            </div>

            <div class="con">

                <input type="checkbox" id="sel5" class="sel sel5"/>

                <label>选项5</label>

            </div>

            <div class="con">

                <input type="checkbox" id="sel6" class="sel sel6"/>

                <label>选项6</label>

            </div>

        </div>

    </div>

</body>

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

<script>

    $(".all").bind("click",function(){

        $(".sel").prop("checked",$(this).prop("checked"));/*prop后边跟一个参数是获取值，跟两个参数是赋值*/

    });

    $(".sel").bind("click",function(){

        var $sel=$(".sel");

        var b=true;

        for(var i=0;i<$sel.length;i++){

            if($sel[i].checked==false){

                b=false;

                break;

            }

        }

        $(".all").prop("checked",b);

    })

</script>

</html>

html

jq实现全选非全选的更多相关文章

  1. 表格中的checkbox复选框 全选非全选 公共方法 及提交选中结果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. IOS（苹果手机）使用video播放HLS流，实现在内部播放及全屏播放（即非全屏和全屏播放）。

    需求: 实现PC及移动端播放HLS流,并且可以自动播放,在页面内部播放及全屏播放功能. 初步:PC及安卓机使用hls.js实现hls流自动播放及全屏非全屏播放 首先使用了hls.js插件,可以实现在P ...

  3. PHP基础班初学心得：用JQ实现表单的全选、反选、取消和删除功能

    摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...

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

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

  5. 让DuiLib CheckBox支持全选、全不选、非全选三种状态

    原文 https://blog.csdn.net/EveyX/article/details/38433783 DuiLib官方库中的Checkbox只有Checked和Uncheck两种状态,但我们 ...

  6. 关于checkbox全选与全不选的实现与遇到的问题

    HTML: <div class="outbox"> <label for="box">全选</label> <inp ...

  7. vue多级复杂列表展开/折叠，全选/分组全选实现

    首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/multipleList/.温馨提示,打开之后按F12,使用手机模式食用,口味更佳! 可以看出,这个列表有三种展现形式: ...

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

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

  9. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

随机推荐

  1. HDU 5688 Problem D map

    Problem D Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...

  2. Xcode 性能优化

    参考: 1, 使用Xcode和Instruments调试解决iOS内存泄露 2, iOS系类教程之用instruments来检验你的app 3, iOS性能优化:Instruments使用实战 4,使 ...

  3. BZOJ 1050 旅行comf(枚举最小边-并查集)

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1050 题意:给出一个带权图.求一条s到t的路径使得这条路径上最大最小边的比值最小? 思路 ...

  4. Cheatsheet: 2013 06.01 ~ 06.22

    .NET Git for Visual Studio and .NET developers How to download multiple files concurrently using Web ...

  5. Myeclipse 10.7 android(安卓) 开发环境搭建

    1 下载并安装JDK,并且设置环境变量 2 下载安装 installer_r24.3.4-windows.exe (Android SDK Manager) 3 使用 Android SDK Mana ...

  6. FLASH CC 2015 CANVAS 实际应用过程中遇到的【粉色】问题（不定期更新）

    1,导入音乐导致发布卡死 一开始以为是不支持,FQ搜索了一些帖子,也有说不能再时间轴加音乐,需要用代码加入,想想不太可能啊,如果真的不能为什么IDE不禁用呢? 而实际问题是: 我使用的其中一条音效有问 ...

  7. Spring管理Bean的三种创建方式

    1.使用类构造器实例化  (90%以上都是使用这种) <bean id=“orderService" class="cn.itcast.OrderServiceBean&qu ...

  8. 保存会话数据——session学习

    Session:Session是服务器端技术,利用这个技术,服务器在运行时可以为每一个用户的浏览器创建一个其独享的session对象,由于session为用户浏览器独享,所以用户在访问服务器的web资 ...

  9. sqlserver 批量删除存储过程(转)

    sqlserver一次只能删除一个存储过程,如果多了,需要很长时间才能删完,所以写了一段语句,直接就把当然数据库下所有用户自定义的存储过程给drop了.不过使用都请留心,当前打开的数据库哦.下面贴代码 ...

  10. Oracle冷备份及其恢复

    一. 冷备份的概念 冷备份是指在数据库关闭状态下所做的物理拷贝,也称脱机备份. 适合于非归档模式下的备份,而且也只能采用这种方式备份. 二. 需要备份的文件 必须备份的文件: 数据文件和控制文件 可以 ...