首页 > 代码库 > 【jQuery】复选框的批量处理：全选、非全选

【jQuery】复选框的批量处理：全选、非全选

2024-09-19 01:52:59   217人阅读

    近期工作都在写jQuery，其实我并没有系统学过js。今天跟大家分享一下近期写的一个有关复选框的批量处理。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測试</title>
</head>
<body>
	<input type="button" class="button" onclick="delChecked()" value="http://www.mamicode.com/删除所选">
	<table border="1px">
		<tr>
			<td>
				<input type="checkbox" id="city" value="http://www.mamicode.com/0" name="city_qx">
			<label for="city">全选</label>
			</td>
			<td>城市</td>
		</tr>
		<tr>
			<td><input type="checkbox" value=http://www.mamicode.com/‘+this.id+‘ onClick="isChecked($(this))" name="city"></td>			
			<td>广州市</td>
		</tr>
		<tr>
			<td><input type="checkbox" value=http://www.mamicode.com/‘+this.id+‘ onClick="isChecked($(this))" name="city"></td>
			<td>深圳市</td>
		</tr>	
		<tr>
			<td><input type="checkbox" value=http://www.mamicode.com/‘+this.id+‘ onClick="isChecked($(this))" name="city"></td>
			<td>杭州市</td>
		</tr>	
	</table>
</html>

 这里的复选框批量处理是删除操作。当选择“全选”button时，其它的复选框也会所有选中，这样的“全选”复选框一般用在列表中，选中之后列表的所有列都会选中。

选中之后若把列表中当中一行复选框去掉。全选的复选框也要不选中。当点击“删除所选”button的时候要删除选中复选框所在的行。

    以下是JQ代码：
<script>
$(function(){
	//全选
	$(":input[name=‘city_qx‘]").click(function(){
		if($(this).attr("checked") == true){
			$(":input[name=‘city‘]").attr("checked",true);
		}else{
			$(":input[name=‘city‘]").attr("checked",false);
		};
	});
})
function isChecked(obj){
	//非全选
	if(obj.attr("checked") == false){
		$(":input[name=‘city_qx‘]").attr("checked",false);
	}
}
//删除
function del(id,obj){
	$.ajax({
		 //略
	})
}
//删除所选
function delChecked(){
	$("input[name=‘city‘]:checked").each(function () {
        del($(this).val(),$(this));
    });
}
</script>

    大家略作參考吧。



Author：立礼
Sign：人生不要有太多的幻想，而要有很多其它的行动。

【jQuery】复选框的批量处理：全选、非全选


联系
我们