编程 Javascript

基于js实现checkbox批量选中操作

Posted in Javascript onNovember 22, 2016

本文实例为大家分享了js实现checkbox批量选中的具体代码，供大家参考，具体内容如下

<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='chkAll' type='checkbox' id='chkAll' onClick="checkAll(this, 'id[]')" value='checkbox' /> 全选
  </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='id[]' type='checkbox' value='{id}' onClick="checkItem(this, 'chkAll')">
  </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='id[]' type='checkbox' value='{id}' onClick="checkItem(this, 'chkAll')">
  </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 = [];
 $('#btn_show').click(function(){
 btnCheck('展示');
 data = {
 "ids":ids
 };
 $.ajax({
 type:"POST",
 url:"{:U('Mall/GoodsShow')}",
 data:data,
 //dataType:"json",
 success:function(msg){
 if(msg == 00){
  alert("批量展示成功");
  window.location.href='/index.php/Admin/Mall/MallList';
 }else{
  alert("批量展示失败，请重新编辑");
 }
 },
 error:function(){
  alert("批量编辑失败，请重新编辑");
 }
 });  
 });
 function btnCheck(info){
 var obj = $("input[name='id[]']:checked").each(function(){
 ids.push($(this).val());
 });
 if (ids == false) {
 alert("请选定要"+info+"的商品");
 return false;
 }else {
 return ids; 
 }
 }
*/
</script>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

- Author -

yangzailu1990

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 面向对象编程基础：封装

Aug 21 Javascript

基于jquery的无缝循环新闻列表插件

Mar 07 Javascript

时间戳转换为时间年月日时间的JS函数

Aug 19 Javascript

javascript中的undefined和not defined区别示例介绍

Feb 26 Javascript

js用typeof方法判断undefined类型

Jul 15 Javascript

javascript动态控制服务器控件实例

Sep 05 Javascript

js树插件zTree获取所有选中节点数据的方法

Jan 28 Javascript

Javascript 数组去重的方法（四种）详解及实例代码

Nov 24 Javascript

ztree实现权限横向显示功能

May 20 Javascript

一篇文章让你彻底弄懂JS的事件冒泡和事件捕获

Aug 14 Javascript

浅谈vuex 闲置状态重置方案

Jan 04 Javascript

使用javascript做时间倒数读秒功能的实例

Jan 23 Javascript

BootStrap中关于Select下拉框选择触发事件及扩展

Nov 22 #Javascript

基于jquery实现的银行卡号每隔4位自动插入空格的实现代码

Nov 22 #Javascript

详解Js模板引擎（TrimPath）

Nov 22 #Javascript

使用JS批量选中功能实现更改数据库中的status状态值（批量展示）

Nov 22 #Javascript

AngularJS中指令的四种基本形式实例分析

Nov 22 #Javascript

AngularJS中directive指令使用之事件绑定与指令交互用法示例

Nov 22 #Javascript

微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

Nov 22 #Javascript