首页 > Web开发 > 详细

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

时间:2015-01-16 01:08:28      阅读:923      评论:0      收藏:0      [点我收藏+]

首先准备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对象相互转化的思想,使得运算最简化。

 

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

原文:http://www.cnblogs.com/sloveling/p/jquery.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!