基于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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
js 调整select 位置的函数
Feb 21 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
JS继承用法实例分析
Feb 05 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
解析PHP可变函数的经典用法
2013/06/20 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
简单JS代码压缩器
2006/10/12 Javascript
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
python复制与引用用法分析
2015/04/08 Python
Python调用命令行进度条的方法
2015/05/05 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
医生进修自我鉴定
2014/01/19 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
服务标兵事迹材料
2014/05/04 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
临时租车协议范本
2014/09/23 职场文书
再谈python_tkinter弹出对话框创建
2022/03/20 Python