jq checkbox 的全选并ajax传参的实例


Posted in Javascript onApril 01, 2017

实例如下:

/全选按钮
  $("#all").click(function(){
    if(this.checked){  
      $(":checkbox").prop("checked", true);  
    }else{  
      $(":checkbox").removeAttr("checked");
    }

  });

  $("#form").on('click','.ids',function(){
    var chknum = $("input[name='ids']:checkbox").size();//选项总个数
    var chk = 0;
    $("input[name='ids']:checkbox:checked").each(function () {  
        chk++;
    });

    if(chknum==chk){//全选
      $("#all").prop("checked",true);
    }else{//不全选
      $("#all").removeAttr("checked");
    }
  });
  
  //上下架
   $('#form').on('click','.up,.down',function(){
    var my = $(this);     
    var val = my.data('status');
    var url = my.data('url');

    var valArr = new Array;
    $("input[name='ids']:checkbox:checked").each(function(i){
      valArr[i] = $(this).val();
    });
    var vals = valArr.join(',');

    
    $.ajax({
      url: my.data('url'),
      method: 'post',
      data: {
        status: val,
        ids:vals
      },
      success: function() {
        $("#all").removeAttr("checked");
        table.search();
      }
    });
  
  });

以上这篇jq checkbox 的全选并ajax传参的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
js实现音频控制进度条功能
Apr 01 #Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 #Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 #Javascript
原生JS实现九宫格抽奖效果
Apr 01 #Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 #Javascript
ES6 Promise对象概念与用法分析
Apr 01 #Javascript
JavaScript中闭包的详解
Apr 01 #Javascript
You might like
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
如何让CI框架支持service层
2014/10/29 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
Node.js console控制台简单用法分析
2019/01/04 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
Python中创建二维数组
2018/10/17 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python的移位操作实现详解
2019/08/21 Python
深入了解python中元类的相关知识
2019/08/29 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
String和StringBuffer的区别
2015/08/13 面试题
《望洞庭》教学反思
2014/02/16 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
老公出轨后的保证书
2015/05/08 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书