您的位置：首页 > 编程技术 > js  >  jq checkbox 的全选并ajax传参的实例

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

 更新时间：2017年4月3日 10:00  点击：2618

实例如下：

/全选按钮
  $("#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传参的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

[!--infotagslink--]

相关文章

  • jquery checkbox无法用attr()二次勾选问题的解决方法

    下面小编就为大家带来一篇jquery checkbox无法用attr()二次勾选问题的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-07-29

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

    下面小编就为大家带来一篇jq checkbox 的全选并ajax传参的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2017-04-03

  • 关于input全选反选恶心的异常情况

    这篇文章主要介绍了关于input全选反选恶心的异常情况的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2016-07-29

  • 实例解析jQuery中如何取消后续执行内容

    本文主要介绍了jQuery中取消后续执行内容的实例，代码通俗易懂。需要的朋友来看下吧...2016-12-02

  • jquery实现简单的全选和反选功能

    我们在做项目的时候，经常需要实现全选和反选功能，到网上搜了一圈，发现网上写的全选的代码，不是完整的，是有bug的。下面结合自己的项目给大家分享下。...2016-01-05

  • 利用JQuery阻止事件冒泡

    冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。本文主要介绍JQuery阻止事件冒泡的实例解析。需要的朋友来看下吧 ...2016-12-02

  • Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法

    这篇文章主要介绍了Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法的相关资料,需要的朋友可以参考下...2016-05-04

  • jquery 全选、全不选、反选效果的实现代码【推荐】

    下面小编就为大家带来一篇jquery 全选、全不选、反选效果的实现代码【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-05-09

  • 利用Bootstrap实现表格复选框checkbox全选

    Bootstrap相信应该不用多介绍，来自 Twitter，是目前最受欢迎的前端框架。这篇文章主要给大家介绍了如何利用Bootstrap实现表格中的checkbox复选框全选效果，文中给出详细的介绍及完整的实例代码，相信对大家的理解和学习具有一定的参考借鉴价值，下面来一起看看吧。...2017-01-09

  • jQuery 更改checkbox的状态,无效的解决方法

    下面小编就为大家带来一篇jQuery 更改checkbox的状态,无效的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-07-29

  • DIV+CSS+jQ实现省市联动可扩展

    这篇文章主要介绍了DIV+CSS+jQ实现省市联动可扩展方法的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下...2016-06-24

  • jQuery中 bind的用法简单介绍

    bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。这篇文章主要介绍了jQuery中的 bind用法,需要的朋友可以参考下...2017-02-19

  • jquery自定义右键菜单、全选、不连续选择

    这篇文章主要为大家详细介绍了jquery自定义右键菜单、全选、不连续选择的相关资料,需要的朋友可以参考下...2016-03-03

  • 基于jQuery实现点击弹出层实例代码

    基于jquery实现点击链接弹出层效果，其基本实现原理是这样的：jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏；对jq点击弹出层相关知识感兴趣的朋友一起学习吧...2016-01-05

  • jquery捕捉回车键及获取checkbox值与异步请求的方法

    这篇文章主要介绍了jquery捕捉回车键及获取checkbox值与异步请求的方法,实例分析了jQuery针对回车键的捕捉,checkbox值的获取以及异步请求的响应等相关技巧,需要的朋友可以参考下...2015-12-25

  • PHP中CheckBox多选框上传失败的代码写法

    这篇文章主要介绍了PHP中CheckBox多选框上传失败的代码写法,以及php处理checkbox复选框表单提交问题，需要的朋友可以参考下...2017-02-18

  • 用自定义图片代替原生checkbox实现全选,删除以及提交的方法

    下面小编就为大家带来一篇用自定义图片代替原生checkbox实现全选,删除以及提交的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-20

  • JS实现CheckBox复选框全选、不选或全不选功能

    CheckBox控件就是我们一般所说的复选框，通常用于某选项的打开或关闭，如一次性处理多个产品，或对文章的删除对产品的下架等处理，一条一条的点显然有一些麻烦，如果能每一行放一个checkbox，然后统一处理就好办的多了,需要的朋友可以参考下...2016-02-05

  • Angular多选、全选、批量选择操作实例代码

    列表批量选择是一个开发人员经常遇到的功能，列表批量选择的实现方式很多，这篇文章主要介绍了Angular多选、全选、批量选择实例代码，有兴趣的可以了解一下。...2017-03-13

  • js点击文本框弹出可选择的checkbox复选框

    这篇文章主要介绍了js点击文本框弹出可选择的checkbox复选框的相关资料,需要的朋友可以参考下...2016-02-05