search

Home  >  Article  >  Web Front-end  >  Implement checkbox batch selection operation based on js

Implement checkbox batch selection operation based on js

高洛峰
高洛峰Original
2016-12-05 16:37:241190browse

The example in this article shares with you the specific code to implement checkbox batch selection in js for your reference. The specific content is as follows

<html >
 <head>
 <title>checkbox全选</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=&#39;chkAll&#39; type=&#39;checkbox&#39; id=&#39;chkAll&#39; onClick="checkAll(this, &#39;id[]&#39;)" value=&#39;checkbox&#39; /> 全选
  </th>
  <th style="background-color:#f7f7f7;width:8%;" class="lf">商品编号</th>
  <th style="background-color:#f7f7f7;width:13%;" class="lf">名称</th>
  <th style="background-color:#f7f7f7;width:18%;" class="lf">标题</th> 
  <th style="background-color:#f7f7f7;width:8%;" class="lf">品牌</th>
  <th style="background-color:#f7f7f7;width:8%;" class="lf">组别</th> 
  </tr>
  <tr>
  <td class="lf" style="text-align:center;">
  <input name=&#39;id[]&#39; type=&#39;checkbox&#39; value=&#39;{id}&#39; onClick="checkItem(this, &#39;chkAll&#39;)">
  </td>
  <td class="lf">001</td>
  <td class="lf">002</td>
  <td class="lf">003</td>
  <td class="lf">004</td>
  <td class="lf">005</td> 
  </tr> 
  <tr>
  <td class="lf" style="text-align:center;">
  <input name=&#39;id[]&#39; type=&#39;checkbox&#39; value=&#39;{id}&#39; onClick="checkItem(this, &#39;chkAll&#39;)">
  </td>
  <td class="lf">001</td>
  <td class="lf">002</td>
  <td class="lf">003</td>
  <td class="lf">004</td>
  <td class="lf">005</td> 
  </tr> 
  <tr height="45">
  <td colspan="10" style="text-align:left;padding-left:40px;">
  <input type="button" id="btn_show" value="批量展示" style="width:100px;margin-left:20px;">
  </td> 
  </tr>
 </table>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="checkbox.js"></script>
<script type="text/javascript">
 /*var ids = [];
 $(&#39;#btn_show&#39;).click(function(){
 btnCheck(&#39;展示&#39;);
 data = {
 "ids":ids
 };
 $.ajax({
 type:"POST",
 url:"{:U(&#39;Mall/GoodsShow&#39;)}",
 data:data,
 //dataType:"json",
 success:function(msg){
 if(msg == 00){
  alert("批量展示成功");
  window.location.href=&#39;/index.php/Admin/Mall/MallList&#39;;
 }else{
  alert("批量展示失败，请重新编辑");
 }
 },
 error:function(){
  alert("批量编辑失败，请重新编辑");
 }
 });  
 });
 function btnCheck(info){
 var obj = $("input[name=&#39;id[]&#39;]:checked").each(function(){
 ids.push($(this).val());
 });
 if (ids == false) {
 alert("请选定要"+info+"的商品");
 return false;
 }else {
 return ids; 
 }
 }
*/
</script>
 </body>
</html>


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：AngularJS global scope and Isolate scope communication usage exampleNext article：AngularJS global scope and Isolate scope communication usage example

Related articles

See more