首页 > 建站教程 > JS、jQ、TS >  简单的jquery全选和反选教程正文

简单的jquery全选和反选教程

我爱模板网在这里分析一个简单的jQuery表单全选、反选教程，先看下效果图：
jquery表单全选反选教程
全选反选效果图

至于html就不分析了，仅仅分析下jquery代码： 
$("button:first").click(function(){
	//这里是全选，先选中所有的checkbox，这里是jquery九大选择器的属性选择器
	//然后用属性操作方法attr，不管有没有被选中，统统都将它们的checked属性的值设置为“checked”或者“true”。
	$(":checkbox").attr("checked","checked");  //或者 $(":checkbox").attr("checked", true);
})
$("button:eq(1)").click(function(){
	//这里是反选
	//需要进行遍历，遍历的次数，就是所有checkbox的数目
	for(var i=0; i<$(":checkbox").length; i++){
		//这里进行判断，如果当前checkbox的checked属性的值是“checked”(或者是“true”)，就表示当前选中
		if($(":checkbox").eq(i).attr("checked") == "checked"){
			//那么，就将它的checked的值设置为“false”，即，变成未选中。
			$(":checkbox").eq(i).attr("checked", false);
		}else{
			//否则，就是没有选中，那么就将它的checked值设置为“checked”或者“true”
			$(":checkbox").eq(i).attr("checked", "checked");
		}
	}
})
$("button:last").click(function(){
	//提交
	if($(":checked").length == 0){
		alert("您一个都没有选择！");
	}else{
		alert("您选择了"+$(":checked").length+"个爱好！");
	}
})
运行下面的代码查看全选反选效果：


提示：您可以先修改部分代码再运行


更多网页设计教程可以参考：合肥网页设计培训。

TAGS: jquery全选教程  jquery反选教程  表单全选反选