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

桃扇骨 2022-05-19 09:19 200阅读 0赞

//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>