基于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 innerHTML使用分析
Dec 03 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
JS原形与原型链深入详解
May 09 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 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
You might like
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
PHP 日期加减的类,很不错
2009/10/10 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
python读取文件名称生成list的方法
2018/04/27 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
Python流程控制语句的深入讲解
2020/06/15 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
python Pexpect模块的使用
2020/12/25 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
测绘工程专业个人自我评价
2013/12/01 职场文书
创业计划书怎样才能打动风投
2014/01/01 职场文书
小学教师听课制度
2014/02/01 职场文书
学生安全承诺书
2014/05/22 职场文书
预备党员转正思想汇报
2014/09/26 职场文书