基于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 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
js清理Word格式示例代码
Feb 13 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
vue实现倒计时功能
Mar 24 Vue.js
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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
php无限极分类实现方法分析
2019/07/04 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
JAVA和C++的区别
2013/10/06 面试题
家长学校工作方案
2014/05/07 职场文书
党员服务承诺书
2014/05/28 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
企业整改报告范文
2014/11/08 职场文书
环保证明
2015/06/23 职场文书
2016年元旦主持词
2015/07/06 职场文书
小学运动会前导词
2015/07/20 职场文书
php去除数组中为0的元素的实例分析
2021/11/17 PHP
JavaScript中reduce()的用法
2022/05/11 Javascript
Promise静态四兄弟实现示例详解
2022/07/07 Javascript