jquery和js分别实现获取checkbox的值+jquery实现复选框全选

//jquery实现全选
	$(function(){
		$("#checkAll").click(function(){
			$(".checkOne").attr("checked",this.checked)
		})
	})
	//批量删除jquery实现提示
	function p_del(){
		var valuelist = new Array();  
		$('input[name="checkOne"]:checked').each(function(){  
			valuelist.push($(this).val());//向数组中添加元素  
		});  
		var ids=valuelist.join(',');//将数组元素连接起来以构建一个字符串  
		alert("选中的复选框的值"+ids+"-----"+valuelist); 
		
		var id= $("input[name='checkOne']:checked").val();//只能获取到首个checkOne的值
		alert(id);
		//获取选中数量
		alert("选中的数量"+$("input[name='checkOne']:checked").length);
	}
	//批量删除 js实现提示
	function p_del() {
		var id = document.getElementsByName('checkOne');
		var value = new Array();
		for(var i = 0; i < id.length; i++){
		 if(id[i].checked)
		 value.push(id[i].value);
		}
		//alert(value);
		var msg = "您确定要删除这"+value.length+"条数据吗?";
		if (confirm(msg) == true) {
			return true;
		} else {
			return false;
		}
	}
//------------------------------------------------------------------------
//jsp代码
<form action="${pageContext.request.contextPath }/DelByGroupServlet">
		<table border="1">
			<tr>
				<th><input  id="checkAll" type="checkbox" name="checkAll"/></th>
				<td>销售单号</td>
				<td>销售商品名称</td>
				<td>销售员</td>
				<td>销售数量</td>
				<td>销售日期</td>
				<td colspan='2'>操作</td>

			</tr>
			<c:forEach items="${sell}" var="list">
				<tr>
					<td><input type="checkbox" name="checkOne" value="${list.sid}" class="checkOne"/></td>
					<td>${list.sid}</td>
					<td>${list.product.name}</td>
					<td>${list.employee.name}</td>
					<td>${list.amount}</td>
					<td>${list.selldate}</td>
					<td><p>
							<a href="${pageContext.request.contextPath}/edit.jsp">编辑</a>
						</p></td>
					<td><p>
							<a
								href="${pageContext.request.contextPath}/DeleteSellServlet?id=${list.sid}"
								onclick="javascript:return del()">删除</a>
						</p></td>
				</tr>
			</c:forEach>
		</table>
		<input type="submit" value="批量删除" onclick="javascript:return p_del()">
	</form>

猜你喜欢

转载自blog.csdn.net/qq_42734859/article/details/81174448
今日推荐