基于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>

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

Javascript 相关文章推荐
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
JavaScript实现手风琴效果
Feb 18 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
You might like
php二维数组用键名分组相加实例函数
2013/11/06 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
js玩一玩WSH吧
2007/02/23 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
机械专业应届生求职信
2013/09/21 职场文书
教师实习自我鉴定
2013/12/14 职场文书
法律进社区实施方案
2014/03/21 职场文书
爱我中华教学反思
2014/04/28 职场文书
会计演讲稿范文
2014/05/23 职场文书
财务管理专业自荐书
2014/09/02 职场文书
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python