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的遍历
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>