浅析form表单中全选功能的实现

我们在做表格批量删除的时候经常要用到checkbox全选批量删除。

现PO出部分示例代码

		<script>
			function selectAll(){  
			    if ($("#SelectAll").prop("checked")) {
			        $(":checkbox").prop("checked", true);  
			    } else {
			        $(":checkbox").prop("checked", false);
			    }  
			}  
		</script>
	<body>
		
		<form class="form-inline definewidth m20" action="company_list.html" method="GET" style="display: inline;">
			总公司：<select name="group_id">
				<option value="">请选择...</option>
				{%for list in grouplist%}
				<option value="{{list.id}}">{{list.name}}</option>
				{%endfor%}
			</select>
			分公司：<select name="company_id">
				<option value="">请选择...</option>
				{%for list in companylist%}
				<option value="{{list.id}}">{{list.name}}</option>
				{%endfor%}
			</select>    
			<input class="btn btn-success" type="submit" value="查询">
		</form>
		
		<form action="company_del.html">
		<table class="table table-bordered table-hover m10">
			<thead>
				<tr>
					<th>选择</th>
					<th>公司ID</th>
					<th>集团ID</th>
					<th>公司名</th>
					<th>公司类型</th>
					<th>公司地址</th>
					<th>创建时间</th>
					<th>修改时间</th>
					<th>操作</th>
					<th>添加</th>
				</tr>
			</thead>
			{%for list in listall%}
			<tr>
				<td><input type="checkbox" id="checkboxlist" value="{{list.id}}" name="check_box_list"></td>
				<td>{{list.id}}</td>
				<td>{{list.group_id}}</td>
				<td>{{list.name}}</td>
				<td>{{list.ctype}}</td>
				<td>{{list.address}}</td>
				<td>{{list.gmt_created}}</td>
				<td>{{list.gmt_modified}}</td>
				<td><a href="company_mod.html?id={{list.id}}">修改</a>/<a href="company_del.html?id={{list.id}}" onclick="if(confirm('确定删除?')==false)return false;">删除</a></td>
				<td><a href="user_add.html?group_id={{list.group_id}}&company_id={{list.id}}" >添加用户</a>
				  <a href="supplier_add.html?group_id={{list.group_id}}&company_id={{list.id}}">添加供应商/供货人</a>
				  <a href="category_add.html?group_id={{list.group_id}}&company_id={{list.id}}">添加产品类别</a>
				  <a href="product_add.html?group_id={{list.group_id}}&company_id={{list.id}}">添加产品</a>
				  <a href="storage_add.html?group_id={{list.group_id}}&company_id={{list.id}}">添加入库单</a>
				</td>
			</tr>
			{%endfor%}
		</table>
		<div class="m10">
		
		<input type="checkbox" id="SelectAll" value="全选" onclick="selectAll();" />全选<input class="btn btn-success" type="submit" value="一键删除">
		</div>
		</form>

　　

posted @ 2017-10-09 15:12  leonardchen  阅读(88)  评论(0)    收藏  举报