zoukankan      html  css  js  c++  java
  • 用jquery实现复选框全选全不选问题(完整版),在网络上怎么也找不到完整的解决方案,重要搞全了

    首先准备jsp页面控件:

      请选择您的爱好:<br>
      <input type="checkbox" id="all" name="selectAll"value="全选"/>全选<br>
      <input type="checkbox"  name="hobby"value="足球"/>足球
        <input type="checkbox"  name="hobby"value="蓝球"/>篮球
        <input type="checkbox"  name="hobby"value="乒乓球"/>乒乓球
        <input type="checkbox"  name="hobby"value="羽毛球"/>羽毛球<br/>
      <input type="button" id="checkAll" value="全选">
      <input type="button" id="reverse" value="反选">
      <input type="button" id="disAll" value="全不选">

    效果:

    用jquery实现以上功能,其中复选框可以全选/全不选,任意一项取消,复选框也会取消,直接上代码

    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function(){
                /* 全选按钮 */
                $("#checkAll").click(function(){
                    $("input[name='hobby']").each(function(){
                        $(this).attr('checked','checked');
                    });
                });
                /* 全不选 */
                $("#disAll").click(function(){
                    $("input[name='hobby']").each(function(){
                        $(this).attr('checked',false);
                    });
                    
                });
                /* 反选 */
                $("#reverse").click(function(){
                    $("input[name='hobby']").each(function(){
                        $(this).attr('checked',!$(this).attr("checked"))
                    });
                });
                /* 全选 (复选框的全选)/全不选*/
                $("#all").click(function(){ 
                    $("[name=hobby]:checkbox").each(function() { 
                    this.checked=$("#all")[0].checked;
                    });
                    });
                
                /* 全选(复选框),单个不选后状态设为false */
                $("[name='hobby']").each(function () {
                    $(this).click(function () {
                    if ($("[name='hobby']:checked").length == $("[name='hobby']").length) {
                    $("#all").attr("checked", "checked");
                    }
                    else $("#all").removeAttr("checked");
                    });
                    });            
            });
        </script>

    值得一提的是复选框的全选全不选,采用js对象和jquery对象相互转化的思想,使得运算最简化。

    业务驱动技术,技术是手段,业务是目的。
  • 相关阅读:
    3、MFC框架程序剖析
    SharePoint 2010 Form 认证 之 IIS 添加数据
    SharePoint 2010 Form 认证 之 配制
    在线压缩
    关于checkbox的各种情况
    C#注册时的邮箱验证
    C#中用到的加密和解密函数
    汉字验证码
    HFS共享服务器在使用路由器的局域网中的共享到外网的方法
    LDAP 服务
  • 原文地址:https://www.cnblogs.com/sloveling/p/jquery.html
Copyright © 2011-2022 走看看