JQury选择器实现全选、反选

实现全选、反选

<body>

	<form method="post" action="">
	
		您精通的语言:<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		<br />
		<input type="checkbox" name="items" value="jav" />java
		<input type="checkbox" name="items" value="js" />javascript
		<input type="checkbox" name="items" value="c++" />c++
		<input type="checkbox" name="items" value="python" />python
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>
	<script type="text/javascript" src="要导入的jqury类库的路径"></script>
	<script type="text/javascript">	
		$(function(){
    
    		
var $items = $(":checkbox[name=items]");
var items = $("[name='items']");
//全选按钮
$("#checkedAllBtn").click(function(){
    
    
items.attr("checked",true);
$("#checkedAllBox").attr("checked",true);
});
//全不选按钮
$("#checkedNoBtn").click(function(){
    
    
items.attr("checked",false);
$("#checkedAllBox").attr("checked",false);
});

//反选按钮
$("#checkedRevBtn").click(function(){
    
    
items.each(function(){
    
    
this.checked = !this.checked;
});
var flag = $("[name='items']:checked").length==4;
$("#checkedAllBox").attr("checked",flag);
});

//提交按钮
$("#sendBtn").click(function(){
    
    
$(":checkbox[name='items']:checked").each(function()
alert(this.value);
		});
	});	
	
//全选/全不选
$("#checkedAllBox").click(function(){
    
    	items.attr("checked",this.checked);
});	
//全选/全不选复选框与items状态同步
$("[name='items']").click(function(){
    
    
var flag = $("[name='items']:checked").length==4;
$("#checkedAllBox").attr("checked",flag);
	});
});		
	</script>
</body>
JQury选择器实现全选、反选

实现全选、反选

猜你喜欢
