基于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 函数中的参数使用分析
Mar 27 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 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,不用COM,生成excel文件
2006/10/09 PHP
数字转英文
2006/12/06 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
JScript的条件编译
2007/05/29 Javascript
javascript import css实例代码
2008/07/18 Javascript
js 深拷贝函数
2008/12/04 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
python仿抖音表白神器
2019/04/08 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
如何利用python读取micaps文件详解
2020/10/18 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
信息与计算科学专业推荐信
2014/02/23 职场文书
一年级班主任感言
2014/03/08 职场文书
机关节能减排实施方案
2014/03/17 职场文书
学习型党组织心得体会
2014/09/12 职场文书
房屋出租委托书格式
2014/09/23 职场文书
个人租房协议书
2014/11/28 职场文书