jquery 全选 反选

jQuery CheckBox全选

Learning, by 木公.

其实这个只要熟悉了jQuery，基本上都能写得出来。在没接触jQuery之前，使用原生的JS写，虽然代码不是很多，但是也挺麻烦的。在这里不得不赞叹jQuery的选择器是多么的好用！

 

$(function(){
	$('#inputChkAll').click(function(){
		$("input[name='chkJob']").attr("checked", $(this).attr("checked"));//注意此处
	});
});

代码如上，#inputChkAll用来全选或者全不选的CheckBox控件，其控制了name='chkJob'这个复选组。

现在回过头再来看看以前用JS如何实现全选和全不选的：

//全选
function checkall() {
	var all = document.getElementsByTagName("input");
	for (var i = 0; i < all.length; i++) {
		if (all[i].type == "checkbox") {
			all[i].checked = true;
		}
	}
}
 
// 反选
function checknull() {
	var all = document.getElementsByTagName("input");
	for (var i = 0; i < all.length; i++) {
		if (all[i].type == "checkbox") {
			all[i].checked = false;
		}
	}
}

ref

http://www.imwls.com/jquery-checkbox-checkall-checknone

jquery的遍历

博客园
社区
首页
新随笔
联系
管理
订阅
随笔- 93  文章- 5  评论- 17 
jquery 遍历
<div><p>1</p><p>2</p><p>3</p></div>
方法一：
<script language="javascript">
$("div").each(function(){ 
        $('p', this).click(function(){alert($(this).html())})
                  
                  });
</script> 
方法二：
<script language="javascript">
$("div p").each(function(){ 
        $(this).click(function(){alert($(this).html())})
                  
                  });
</script>
最后我实现的全选 ，反选
    <input id="select_all" type="checkbox" />全选
    <input id="select_reverse" type="checkbox" />反选
<script type="text/javascript">
    $("#select_all").click(function(){
        //alert($(this).attr("checked"));
        $("input[name='product_ids[]']").attr("checked",$(this).attr("checked"));
        });
    $("#select_reverse").click(function(){
        $("input[name='product_ids[]']").each(function(idx,item){
            $(item).attr("checked",!$(item).attr("checked"));
            
            });})
</script>