基于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 相关文章推荐
jquery 上下滚动广告
Jun 17 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
微信小程序使用npm包的方法步骤
Aug 13 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
DC动漫人物排行
2020/03/03 欧美动漫
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
超级强大的表单验证
2006/06/26 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python技能之数据导出excel的实例代码
2017/08/11 Python
详解python Todo清单实战
2018/11/01 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
高三毕业生自我鉴定
2013/12/20 职场文书
合作意向书
2014/07/30 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
学习心得体会
2019/06/20 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL