页面载入中,请稍候...

jQuery一句话实现多选框全选/取消

2012-05-20 13:33:33    作者:user    来源:会员投稿    评论:读取中    点击:读取中    [我要投稿]

<!DOCTYPE Html><html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min....
<!DOCTYPE Html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script type="text/javascript">
            function selectAll(checkbox) {
                $('input[type=checkbox]').attr('checked', $(checkbox).attr('checked'));
            }
        </script>
    </head>
    <body>
        <input type="checkbox" onclick="selectAll(this);" />全选<br/>
        <input type="checkbox"  /><br/>
        <input type="checkbox"  /><br/>
        <input type="checkbox"  /><br/>
        <input type="checkbox"  /><br/>
        <input type="checkbox"  /><br/>
        <input type="checkbox"  /><br/>
        ……
    </body>
</html>
selectAll函数太长了~还能短一点:
function checkAll(chk){
    $(':checkbox[name=" chk_one"]').attr('checked', chk.checked);
} 

选择指定组:

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function selectGroup(checkbox,obj) {
$('input[name='+obj+']').attr('checked', $(checkbox).attr('checked'));
}
</script>
</head>
<body>
<input type="checkbox" id="grp1" name="grp1" />选中GROUPA<br/>
GROUPA:<br/>
<input type="checkbox" name="grp1" />11<br/>
<input type="checkbox" name="grp1" />22<br/>
<input type="checkbox" name="grp1" />33<br/><br/>

<input type="checkbox" onclick="selectGroup(this,'grp2');" />选中GROUPB<br/>
GROUPB:<br/>
<input type="checkbox" name="grp2" />44<br/>
<input type="checkbox" name="grp2" />55<br/>
<input type="checkbox" name="grp2" />66<br/>

<script type="text/javascript">
function select_checkbox(){

$('input[name='+$(this)[0].id+']').attr('checked', $(this).attr('checked'));
}
$("#grp1").click(select_checkbox);
</script>
</body>
</html> 

也有人对上面的这些代码提出了下面的建议:

$('input[type=checkbox]').prop('checked', $(checkbox).prop('checked'));

用 prop 方法比 attr 要好,
attr 方法返回的是 checked 和 undefined 而 prop 方法返回的是 true 和 false.
http://api.jquery.com/prop/

本文版权声明: 转载文章,有少量修改。如果本文或软件侵犯了您的版权,请告之网站管理员。

相关热词搜索:jQuery   多选框全选  

上一篇:30个最常用css选择器解析
下一篇:返回顶部的js实现(jQuery)

分享到: 收藏