最近工作都在写jQuery,事实上我并没有系统学过js,今天跟大家分享一下最近写的一个有关复选框的批量处理。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>
<input type="button" class="button" οnclick="delChecked()" value="删除所选">
<table border="1px">
<tr>
<td>
<input type="checkbox" id="city" value="0" name="city_qx">
<label for="city">全选</label>
</td>
<td>城市</td>
</tr>
<tr>
<td><input type="checkbox" value='+this.id+' onClick="isChecked($(this))" name="city"></td>
<td>广州市</td>
</tr>
<tr>
<td><input type="checkbox" value='+this.id+' onClick="isChecked($(this))" name="city"></td>
<td>深圳市</td>
</tr>
<tr>
<td><input type="checkbox" value='+this.id+' onClick="isChecked($(this))" name="city"></td>
<td>杭州市</td>
</tr>
</table>
</html>
这里的复选框批量处理是删除操作。当选择“全选”按钮时,其他的复选框也会全部选中,这种“全选”复选框一般用在列表中,选中之后列表的所有列都会选中。选中之后若把列表中其中一行复选框去掉,全选的复选框也要不选中。当点击“删除所选”按钮的时候要删除选中复选框所在的行。
下面是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:人生不要有太多的幻想,而要有更多的行动。