码迷,mamicode.com
首页 > Web开发 > 详细

Jquery---checkbox的全选或者全部取消

时间:2015-06-30 15:08:47      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:jquery checkbox 全部选中

    checkbox是我们在系统开发中不可避免地要使用的一个控件。通常的用法就是,任意选中多个checkbox、全选或者全部取消。前段时间刚又碰到了checkbox这方面的用法。几天就抽点时间,简单地总结一下,希望给想要使用checkbox控件的朋友们一点儿帮助。

    有时候我们要点击一个checkbox控件,它被选中时,其它checkbox全部被选中,再点击它,即取消选中它,其它checkbox全部被取消选中。这时候我们就可以在HTML或者.jsp文件中使用如下代码来实现此功能。代码如下:

<div> <div class="checkbox-inline">
                <label>
                    <input type="checkbox" id="checkAll"  >全部选中
                </label>
            </div>
</div>
$(document).ready(function(){
        $("#checkAll").click(function(){
            if(this.checked)
            {
                $("input[name='checkbox']").each(function(){
                    this.checked=true;
                });
                // $("[name='checkbox']").attr("checked",'true');
            }
            else
            {
                $("input[name='checkbox']").each(function(){
                    this.checked=false;
                });
                //$("[name='checkbox']").attr("checked",'false');
            }

        });
    });
选中了复选框checkbox,那么如何获取被选中的复选框checkbook的值呢?

<body> 
<input type="checkbox" name="test" value="0" />0 
<input type="checkbox" name="test" value="1" />1 
<input type="checkbox" name="test" value="2" />2 
<input type="checkbox" name="test" value="3" />3 
<input type="checkbox" name="test" value="4" />4 
<input type="checkbox" name="test" value="5" />5 
<input type="checkbox" name="test" value="6" />6 
<input type="checkbox" name="test" value="7" />7 
<input type="button" onclick="chk()" value="提 交" /> 
</body> 

function jqchk(){ //jquery获取复选框值 
var chk_value =[]; 
$("input[name="test"]:checked").each(function(){ 
chk_value.push($(this).val()); 
}); 
alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value); 
} 
以上就是checkbox常用的几个功能,希望能给小伙伴们一点帮助。



版权声明:本文为博主原创文章,未经博主允许不得转载。

Jquery---checkbox的全选或者全部取消

标签:jquery checkbox 全部选中

原文地址:http://blog.csdn.net/u013485584/article/details/46692355

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!