基于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 相关文章推荐
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 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中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
php中的观察者模式简单实例
2015/01/20 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
javascript Base类 包含基本的方法
2009/07/22 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
python 多线程串行和并行的实例
2019/02/22 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
区分python中的进程与线程
2020/08/13 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
介绍一下linux的文件系统
2012/03/20 面试题
网站创业计划书
2014/04/30 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
乐山大佛导游词
2015/02/02 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技