JSP、JS实现多选全选操作

Dear 丶 2022-08-05 00:52 172阅读 0赞

类似于淘宝购物车中的多选操作，可以全选操作，也可以部分选择操作

![Center][]

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="全选" />  全选

这行代码是用来存放被选择的操作对象的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方法：

[Center]: /images/20220805/c354ee310c4644e3ad9091b799ebe1d0.png