天天看點

JSP、JS實作多選全選操作

類似于淘寶購物車中的多選操作,可以全選操作,也可以部分選擇操作

JSP、JS實作多選全選操作

JSP頁面顯示代碼:

<tr><td><input οnclick=ischecked() type='checkbox' name='item[]'></input></td><td>"+"Apple/蘋果6 4.7寸港版</td><td><a class='operate' href='javascript:deleteState("+id+")'>删除</a></td></tr>
<tr><td><input οnclick=ischecked() type='checkbox' name='item[]'></input></td><td>"+"Apple/蘋果6 4.7寸港版</td><td><a class='operate' href='javascript:deleteState("+id+")'>删除</a></td></tr>
           

全選代碼:

<input id="all" type="checkbox" value="全選" />  全選
           
<input type="hidden" id="townIds" name="townIds" value=""/> 
           

這行代碼是用來存放被選擇的操作對象的id值;

"全選"按鈕功能實作代碼:

$(document).ready(function () {
<span style="white-space:pre">	</span>$("#all").click(function(){  
		    	  if(this.checked){  
			    	  $("input[name='item[]']").each(function(){this.checked=true;}); 
		    	  }else{   
		    	      $("input[name='item[]']").each(function(){this.checked=false;});   
		    	  }   
		    	  ischecked();
		 });
 });
           

點選單個對象選擇JS方法:

function ischecked(){
	  		  var townIds="";
	  		  $("input[name='item[]']:checkbox:checked").each(function(i){  
	  			  if(i==$("input[name='item[]']:checkbox:checked").length-1)
	  				townIds+=$(this).val();
	  			  else
	  				townIds+=$(this).val()+","; 
	  		    });  
	  		  $("#townIds").val(townIds);
	  	  };
           

批量删除的JS方法:

function delete() {
			
			var townIds = "";
			var ch = false;
			for (var i = 0; i < items.length; i++) {
				if (items[i].checked) {
					ch = true;
					townIds = (townIds + items[i].value + ",");
				}
			}
			if (!ch) {
				alert("批量操作請至少選擇一個對象!");
			} else if (ch && townIds.length > 1) {
				townIds = townIds.substring(0, townIds.length - 1);
				$.post(deleteUrl,{townId:townIds},function(data){
				<span style="white-space:pre">	</span>if(data==1){
						 alert("批量修改存在修改成功");	
				       } 
				 	});  
			}
		};