【jquery】一个简单的单选、多选、全选、反选、删除的小功能

对表格内容进行单行删除、单行选中、多行选中、全选、反选、删除选中行等操作

HTML代码

<table class="table table-bordered border-shadow">
	<colgroup>
        <col class="col-xs-1">
        <col class="col-xs-1">
        <col class="col-xs-4">
        <col class="col-xs-4">
        <col class="col-xs-2">
    </colgroup>
	<thead>
		<tr>
			<th style="width:5%">选择</th>
		    <th style="width:5%">序号</th>
			<th style="width:35%">内容</th>
			<th style="width:35%">图片</th>
			<th style="width:20%">操作</th>
		</tr>
	</thead>
	<tbody id="tab_lisy">
		<tr>
			<td>
				<div class="checkbox" style="padding-left:30px;">
			        <label>
			          <input type="checkbox" value="0" >
			        </label>
			      </div>
			</td>
			<td></td>
			<td></td>
			<td></td>
			<td>
				<button class="btn btn-success del_line"   type="button">删除</button>
				<button class="btn btn-success"   type="button">忽略</button>
			</td>
		</tr>
		<tr>
			<td>
				<div class="checkbox" style="padding-left:30px;">
			        <label>
			          <input type="checkbox" value="0">
			        </label>
			      </div>
			</td>
			<td></td>
			<td></td>
			<td></td>
			<td>
				<button class="btn btn-success del_line"   type="button">删除</button>
				<button class="btn btn-success"   type="button">忽略</button>
			</td>
		</tr>
		<tr>
			<td>
				<div class="checkbox" style="padding-left:30px;">
			        <label>
			          <input type="checkbox"  value="0">
			        </label>
			      </div>
			</td>
			<td></td>
			<td></td>
			<td></td>
			<td>
				<button class="btn btn-success del_line"   type="button">删除</button>
				<button class="btn btn-success"   type="button">忽略</button>
			</td>
		</tr>
		<tr>
			<td>
				<div class="checkbox" style="padding-left:30px;">
			        <label>
			          <input type="checkbox"  value="0">
			        </label>
			      </div>
			</td>
			<td></td>
			<td></td>
			<td></td>
			<td>
				<button class="btn btn-success del_line"   type="button">删除</button>
				<button class="btn btn-success"   type="button">忽略</button>
			</td>
		</tr>
	</tbody>
</table>
<div>
	<button class="btn btn-success" id="all_line"  type="button">全选</button>
	<button class="btn btn-success " id="del_all_line"  type="button">删除</button>
</div>	

　　

 

jquery代码

//单行删除
$(".del_line").click(function(){
    $(this).parents("tr").empty();
});
//全选、反选
var line=1;
$("#all_line").on("click",function() { 
    if (line==1) {
        $("#tab_lisy").find(":checkbox").prop("checked",true).val("1");
        $(this).text("反选");
        line=0;
    }else{
        $("#tab_lisy").find(":checkbox").prop("checked",false).val("0");
        $(this).text("全选");
        line=1;
    }
});

//单选 
$("#tab_lisy").find(":checkbox").on("click",function() { 
    if($(this).val()==0){
        $(this).prop("checked",true).val("1");
    }else{
        $(this).prop("checked",false).val("0");
    }
});
//删除所有选中的
$("#del_all_line").on("click",function(){
    $("#tab_lisy").find(":checkbox[value=1]").parents("tr").empty();
    
});