SoFunction
Updated on 2025-02-28

Implement checkbox batch selection operation based on js

This example shares the specific code for batch selection of js checkbox for your reference. The specific content is as follows

<html >
 <head>
 <title>checkboxSelect all</title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <style type="text/css"></style>
 <script type="text/javascript"></script>
 </head>
 <body>
 <table style="border:1px solid red;">  
  <tr>
  <th style="background-color:#f7f7f7;width:8%;text-align:center;" class="lf">
  <input name='chkAll' type='checkbox' id='chkAll' onClick="checkAll(this, 'id[]')" value='checkbox' /> Select all
  </th>
  &lt;th style="background-color:#f7f7f7;width:8%;" class="lf">Product number</th>  &lt;th style="background-color:#f7f7f7;width:13%;" class="lf">name</th>  &lt;th style="background-color:#f7f7f7;width:18%;" class="lf">Title</th>  &lt;th style="background-color:#f7f7f7;width:8%;" class="lf">brand</th>  &lt;th style="background-color:#f7f7f7;width:8%;" class="lf">Group</th>  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td class="lf" style="text-align:center;"&gt;
  &lt;input name='id[]' type='checkbox' value='{id}' onClick="checkItem(this, 'chkAll')"&gt;
  &lt;/td&gt;
  &lt;td class="lf"&gt;001&lt;/td&gt;
  &lt;td class="lf"&gt;002&lt;/td&gt;
  &lt;td class="lf"&gt;003&lt;/td&gt;
  &lt;td class="lf"&gt;004&lt;/td&gt;
  &lt;td class="lf"&gt;005&lt;/td&gt; 
  &lt;/tr&gt; 
  &lt;tr&gt;
  &lt;td class="lf" style="text-align:center;"&gt;
  &lt;input name='id[]' type='checkbox' value='{id}' onClick="checkItem(this, 'chkAll')"&gt;
  &lt;/td&gt;
  &lt;td class="lf"&gt;001&lt;/td&gt;
  &lt;td class="lf"&gt;002&lt;/td&gt;
  &lt;td class="lf"&gt;003&lt;/td&gt;
  &lt;td class="lf"&gt;004&lt;/td&gt;
  &lt;td class="lf"&gt;005&lt;/td&gt; 
  &lt;/tr&gt; 
  &lt;tr height="45"&gt;
  &lt;td colspan="10" style="text-align:left;padding-left:40px;"&gt;
  &lt;input type="button"  value="Batch display" style="width:100px;margin-left:20px;"&gt;
  &lt;/td&gt; 
  &lt;/tr&gt;
 &lt;/table&gt;
&lt;script type="text/javascript" src="jquery-1.7."&gt;&lt;/script&gt;
&lt;script type="text/javascript" src=""&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
 /*var ids = [];
  $('#btn_show').click(function(){
  btnCheck('Show');
  data = {
  "ids":ids
  };
  $.ajax({
  type:"POST",
  url:"{:U('Mall/GoodsShow')}",
  data:data,
  //dataType:"json",
  success:function(msg){
  if(msg == 00){
   alert("Batch display successful");
   ='//Admin/Mall/MallList';
  }else{
   alert("Batch display failed, please re-edit");
  }
  },
  error:function(){
   alert("Batch editing failed, please re-edit");
  }
  });
  });
  function btnCheck(info){
  var obj = $("input[name='id[]']:checked").each(function(){
  ($(this).val());
  });
  if (ids == false) {
  alert("Please select the product to "+info+");
  return false;
  }else {
  return ids;
  }
  }
 */
&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.