基于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 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
css配合jquery美化 select
Nov 29 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 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 imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
jquery复选框全选/取消示例
2013/12/30 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
Vue实现push数组并删除的例子
2019/11/01 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python中的字符串内部换行方法
2018/07/19 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
python ssh 执行shell命令的示例
2020/09/29 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
医务工作者先进事迹材料
2014/01/26 职场文书
业务总经理岗位职责
2014/02/03 职场文书
早会主持词
2014/03/17 职场文书
承诺书怎么写
2014/03/26 职场文书
解除合同协议书
2014/04/17 职场文书
法人委托书
2014/07/31 职场文书
安全月宣传标语
2014/10/07 职场文书
就业协议书范本
2014/10/08 职场文书
800字作文之大雪
2019/12/04 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python