jquery一句话全选/取消全选

因为后台要用到该功能,熟悉了下jquery的选择器功能。便实现了jquery版的全选。感觉jquery确实比用javascript节省很多劳力啊..呵呵

1、当然要引入jquery文件啦。
2、建立函数
var check_all = function(obj,name){$(":checkbox[name='"+name+"']").attr("checked",obj.checked); }
3、使用

复制代码 代码如下:


<!DOCTYPE Html>
<html>
<head>
<script type="text/javascript" src="https://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" />全选<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>


多组的JQUERY选中与取消

复制代码 代码如下:


<head>
<script type="text/javascript" src="https://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" />选中GROUPA<br/>
GROUPA:<br/>
<input type="checkbox" />11<br/>
<input type="checkbox" />22<br/>
<input type="checkbox" />33<br/><br/>
<input type="checkbox" />选中GROUPB<br/>
GROUPB:<br/>
<input type="checkbox" />44<br/>
<input type="checkbox" />55<br/>
<input type="checkbox" />66<br/>
</body>
</html>



另外的补充代码:
引用Jquery 库jquery-1.4.1-vsdoc.js 等

Jquery脚本代码——————————————————————

复制代码 代码如下:


$(function() {
$('#inputCheck').click(function() {
$("input[name='Checkbox1']").attr("checked", $(this).attr("checked"));
});
}); // 全选

$(function() {
$("#select_reverse").click(function() {
$("input[name='Checkbox1']").each(function(idx, item) {
$(item).attr("checked", !$(item).attr("checked"));
})
});
});//反选


html 前台代码————————————————————————
[code]
<input type="checkbox" />全选
<input type="checkbox" />反选
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
[html]

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdfdsg.html