zoukankan      html  css  js  c++  java
  • jQuery实现一个全选复选框联动效果

    • 类似邮件列表里的复选框
    • 要求双向联动

    ☛ 【实现】:

    <body>
        <div>
            <input type="checkbox" name="checkAll">全选
        </div>
        <br>
        <div class="cbList">
            <input type="checkbox" name="cb">
            <input type="checkbox" name="cb">
            <input type="checkbox" name="cb">
        </div>
    </body>
    
    <script>
        var $ckAll = $('input[name=checkAll]'),
        		$cb = $('input[name=cb]'),
        		$cbList = $('.cbList');
        
        $ckAll.on('click', function() {
        	var flag = $ckAll.prop('checked');
        
        	if (flag) {
        		$cb.prop('checked', true);
        	} else {
        		$cb.prop('checked', false);
        	}
        
        });
        
        
        $cbList.on('click', function() {
        	var flag = true;
        
        	$.each($cb, function(index, item) {
        		if (!$(item).prop('checked')) {
        			flag = false;
        		}
        	});
        
        	if (flag) {
        		$ckAll.prop('checked', true);
        	} else {
        		$ckAll.prop('checked', false);
        	}
        });
    </script>
    

    ☛ 【补充】:

    (1) 判断是否选中的两种写法:

    var flag = $ckAll.prop('checked');
    var flag = $ckAll.is(':checked');
    

    (2) 注意 attr 和 prop

    attr:作为一个节点属性,初始化之后不会改变
    prop:会随着事件而改变
    
    .attr( "checked" ): checked
    .prop( "checked" ): true
    .is( ":checked" ): true
    

    Scoop It and Enjoy the Ride!
  • 相关阅读:
    python12306抢票
    函数、迭代器、生成器、装饰器
    类(面向对象、增删改查、继承、多态、封装、反射)
    js循环、异常、函数
    js引入、注释、事件
    天融信护网面试
    Java URL处理
    Java多线程编程
    Java网络编程
    Java序列化
  • 原文地址:https://www.cnblogs.com/Ruth92/p/5836672.html
Copyright © 2011-2022 走看看