1. 程式人生 > >jquery和js分別實現獲取checkbox的值+jquery實現複選框全選

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>