基于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 相关文章推荐
最新28个很棒的jQuery 教程
May 28 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 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
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
php调用C代码的实现方法
2014/03/11 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
js编写简易的计算器
2020/07/29 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
Python爬取APP下载链接的实现方法
2016/09/30 Python
Python三级菜单的实例
2017/09/13 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
python如何实现代码检查
2019/06/28 Python
Python for循环及基础用法详解
2019/11/08 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
母亲80寿诞答谢词
2014/01/16 职场文书
妇联主席先进事迹
2014/05/18 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript