CHECKBOX全选,取消全选,反选 jquery代码
本文章提供四种关于jquery checkbox全选,取消全选,反选实例代码哦，由于jquery很方便，所以在对复选框方面越来越好了，好了费话不说多了我们来看看这款全选，反选代码。
$("#myform").togglecheckboxes()//全选,取消全选,反选
$("#myform").togglecheckboxes(":not(#checkbox1)")//全选,取消全选且不选中第一个,反选
$("#myform").togglecheckboxes(".top5", true)//全选,取消全选且只选前五个,反选
$("#myform").checkcheckboxes();// 全选
$("#myform").checkcheckboxes(":not(#checkbox1)");//除第一个之外全选
$("#myform").checkcheckboxes(".top5", true);//前五个全选
$("#myform").uncheckcheckboxes(); //取消全选
$("#myform").uncheckcheckboxes(":not(#checkbox1)");//取消全选,排除第一个
$("#myform").uncheckcheckboxes(".top5", true);//取消全选排除前五个
方法二
<script language=网页特效 src="jquery.js"></script>
<script language="javascript">
<!--
$("document").ready(function(){
$("#all").click(function(){
if(this.checked){
$("input[name='checkbox']").each(function(){this.checked=true;});
$("#btn1").attr("value","反选");
}else{
$("input[name='checkbox']").each(function(){this.checked=false;});
$("#btn1").attr("value","全选");
}
});$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
})
$("#btn2").click(function(){
$("[name='checkbox']").removeattr("checked");//取消全选
})
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
})
$("#btn4").click(function(){
$("[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeattr("checked");
}
else
{
$(this).attr("checked",'true');
}
})
})
$("#btn5").click(function(){
var str="";
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+"rn";
})
alert(str);
})
})
//-->
</script>
<body>
<form name="form1" method="post" action="">
<input type="checkbox" id="all" name="all">
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">
<br>
<input type="checkbox" name="checkbox" value="checkbox1">
checkbox1
<input type="checkbox" name="checkbox" value="checkbox2">
checkbox2
<input type="checkbox" name="checkbox" value="checkbox3">
checkbox3
<input type="checkbox" name="checkbox" value="checkbox4">
checkbox4
<input type="checkbox" name="checkbox" value="checkbox5">
checkbox5
<input type="checkbox" name="checkbox" value="checkbox6">
checkbox6
<input type="checkbox" name="checkbox" value="checkbox7">
checkbox7
<input type="checkbox" name="checkbox" value="checkbox8">
checkbox8
</form>
方法二
<input type="button" class="btn_selectallbg" id="checkall2" value="全选" />
<input type="checkbox" name="groupid[]" value="遍历的某列值 " />
// 给全选按钮添加全选功能
$('#checkall2').toggle(function(){
$("input[name='groupid[]']").each(function(){
$(this).attr('checked',true);
});
$(this).attr('value','取消');
},function(){
$("input[name='groupid[]']").each(function(){
$(this).attr('checked',false);
});
$(this).attr('value','全选');
}
);
方法三
<script type="text/javascript">
<!--
$(document).ready(function(){$("#abutton").click(function(){ $("input[@type=checkbox]").check(); });
$("#ubutton").click(function(){ $("input[@type=checkbox]").uncheck(); });});
jquery.fn.extend({
check: function() { return this.each(function() { this.checked = true; }); },
uncheck: function() { return this.each(function() { this.checked = false; });
}
});
//-->
</script><button id="abutton">全选</button>
<button id="ubutton">反选</button><input type="checkbox" value="" />a
<input type="checkbox" value="" />b
<input type="checkbox" value="" />c
<input type="checkbox" value="" />d
<input type="checkbox" value="" />e
补充：网页制作,jquery
