基于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实现禁止后退的方法
Dec 27 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
vue.js路由跳转详解
Aug 28 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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下几种删除目录的方法总结
2007/08/19 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
Python的高级Git库 Gittle
2014/09/22 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
python字典排序的方法
2019/10/12 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
Yahoo的PHP面试题
2014/05/26 面试题
致跳高运动员广播稿
2014/01/13 职场文书
学年自我鉴定
2014/01/16 职场文书
化工见习报告范文
2014/10/31 职场文书
房贷工资证明范本
2015/06/12 职场文书
运动会200米广播稿
2015/08/19 职场文书
nginx rewrite功能使用场景分析
2022/05/30 Servers