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 相关文章推荐
纯JS代码实现一键分享功能
Apr 20 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
vue.js封装switch开关组件的操作
Oct 26 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
使用PHP制作新闻系统的思路
2006/10/09 PHP
php session和cookie使用说明
2010/04/07 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
php微信开发之上传临时素材
2016/06/24 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
前端微信支付js代码
2016/07/25 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
深入解析ES6中的promise
2018/11/08 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
Python转码问题的解决方法
2008/10/07 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Python何时应该使用Lambda函数
2019/07/02 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
教师专业理论水平的自我评价分享
2013/11/09 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
浅谈redis整数集为什么不能降级
2021/07/25 Redis
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技