jQuery实现全选反选效果

HTML/CSS 2012-04-22 jquery全选,jquery反选

有时候,我们对一些列表操作经常需要全选,反选功能。例如博客里文章列表,我们可以全选或反选后可以对选中的文章进行删除,下线,移动,复制等操作。下面直接贴出例子代码

jQuery代码

            // 当文档加载完后      
            $(document).ready(function(){
                // 给全选框加上动作    
                $(":checkbox[value='全选']").click(function(){
                    // 获取全部标签
                    $ul = $('ul li :checkbox');
                    // 判断勾选还是取消
                    if($(this).is(':checked')){
                        // 如果勾选则全部选项选上            
                        $ul.each(function(){
                            $(this).attr('checked',true);
                        });    
                    }else{
                        // 如果取消则全部选项取消            
                        $ul.each(function(){
                            $(this).attr('checked',false);
                        });        
                    }            
                });

                // 给反选框加上动作
                $(":checkbox[value='反选']").click(function(){
                    // 获取全部标签
                    $ul = $('ul li :checkbox');

                    $ul.each(function(){
                        // 判断是否已经勾选
                        if($(this).is(':checked')){
                            // 如果已经勾选则取消
                            $(this).attr('checked',false);
                        }else{
                            // 如果未勾选则选上    
                            $(this).attr('checked',true);    
                        }
                    });                
                });

                // 给每个多选框加入动作
                $('ul li :checkbox').click(function(){
                    // 获取未选标签
                    $ul = $('ul li :checkbox:not(:checked)');
                    // 判断是否有元素
                    if($ul.length){
                        // 如果有未选则取消全选框勾选状态    
                        $(":checkbox[value='全选']").attr('checked',false);
                    }else{
                        // 如果没有则自动勾选上全选框状态    
                        $(":checkbox[value='全选']").attr('checked',true);
                    }
                });
            });

html代码

	<h1>

	    全选/单选实现效果</h1>

	<ul>

	    <li>

	        <input type="checkbox" />多选框1</li>

	    <li>

	        <input type="checkbox" />多选框2</li>

	    <li>

	        <input type="checkbox" />多选框3</li>

	    <li>

	        <input type="checkbox" />多选框4</li>

	    <li>

	        <input type="checkbox" />多选框5</li>

	    <li>

	        <input type="checkbox" />多选框6</li>

	    <li>

	        <input type="checkbox" />多选框7</li>

	    <li>

	        <input type="checkbox" />多选框8</li>

	    <li>

	        <input type="checkbox" />多选框9</li>

	    <li>

	        <input type="checkbox" />多选框10</li>

	    <li>

	        <input type="checkbox" />多选框11</li>

	    <li>

	        <input type="checkbox" />多选框12</li>

	    <li>

	        <input type="checkbox" />多选框13</li>

	    <li>

	        <input type="checkbox" />多选框14</li>

	    <li>

	        <input type="checkbox" />多选框15</li>

	    <li>

	        <input type="checkbox" />多选框16</li>

	    <li>

	        <input type="checkbox" />多选框17</li>

	    <li>

	        <input type="checkbox" />多选框18</li>

	</ul>

	<p>

	    <input type="checkbox" value="全选" />全选 <input type="checkbox" value="反选" />反选</p>


文字链接:《jQuery实现全选反选效果

文章地址:http://www.qttc.net/20120441.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 1