单击时触发效果:

如果有一个没有选中把全选的勾去了,如果select所有的都选中了,那就把全选勾上



html里:

<div class="row cl">

   <label class="form-label col-xs-4 col-sm-2 "><span class="c-red">*</span>可购买者等级列表:</label>

   <div class="formControls col-xs-8 col-sm-9 skin-minimal checktop">
<input type="checkbox" id="purchaser_levelAll" onclick="checkAll(this,'purchaser_level_select')" value="">
<span class="mr-5">All</span>
@foreach($memberLevleList as $vo)
<div class="check-box">
<input type="checkbox" onclick="check_isAll(this,'purchaser_level_select','purchaser_levelAll')" class="purchaser_level_select" id="purchaser_level_ids-{{$vo->id}}" name="purchaser_level_ids[]" value="{{$vo->id}}">
<label for="purchaser_level_ids-{{$vo->id}}">{{$vo->status_name}}</label>
</div>
@endforeach </div>
</div>

js里:

//如果有一个没有选中把全选的勾去了,如果select所有的都选中了,那就把全选勾上
/**
* 全选:
* @author haima
* @param $this 当着元素
* @param $className 要操作的所有的select的class名字
*/
function checkAll($this,$className){
var current=$($this);
if(current.is(':checked')) {
$('.'+$className).prop('checked',true);
}else{
$('.'+$className).prop('checked',false);
}
} /**
* @author haima
* @param $this 当前操作的元素
* @param $className 所有的select的class名字
* @param $selectname_All 选择所有的select的id名字
*/
function check_isAll($this,$className,$selectname_All){
var current=$($this); //当着元素
var selectname_All = $('#'+$selectname_All); //全选按钮的名字
if(current.is(':checked')) {
var len_num=0;
$('.'+$className).each(function(){
if(!this.checked){
selectname_All.prop('checked',false);
return false;
}else{
len_num += 1;
}
});
var len=$('.'+$className).length; //长度
if(len == len_num){
selectname_All.prop('checked',true);
}
}else{
selectname_All.prop('checked',false);
}
}

静态页面里初始化页面时显示:

html里调用方法:

<script>
$(function(){
is_classAll('labels_idsAll','labels_ids');
is_classAll('recpos_idsAll','recpos_ids');
is_classAll('purchaser_levelAll','purchaser_level_select');
}); /**
* 静态页面里判断class是否全部被选中,如果全部都光勾选了就把all复选框也打上勾,否则all复选框不勾选
* @param $allSelectname 选择所有的select的id名字
* @param $class_name 所有的select的class名字
*/
function is_classAll($allSelectname,$class_name){
var selectname_All = $('#' + $allSelectname); //全选框的id名字
var className=$('.' + $class_name); //class的名字
var total_len=className.length; //class的总长度
var len_num=0;
className.each(function(){
if(!this.checked){
selectname_All.prop('checked',false);
return false;
}else{
len_num += 1;
}
});
if(total_len == len_num){
selectname_All.prop('checked',true);
}
} </script>

JQ 封装全选函数的更多相关文章

  1. JavaScript 全选函数的实现

    Html代码: <table id="purchase-info" class="table table-bordered table-hover table-st ...

  2. js和jq实现全选反选

    在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...

  3. JQ实现全选、全不选

    代码: <table class="table myTable table-hover"> <thead> <tr> <th> &l ...

  4. jq变态全选vs原生变态全选

    <script> $(function(){ var num=0; $("#btn").on('click',function(){ if(this.checked){ ...

  5. jq实现全选、全不选、反选

    基本思路: 1全选:点击全选按钮的时候,将input的属性checked设置为true; 2全不选:点击全不选按钮的时候,将input的属性checked设置为false; 3反选:点击反选按钮的时候 ...

  6. jq实现全选非全选

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. Jq 遍历 全选 全不选 反选

    //全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked') ...

  8. jq三级全选全不选

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. jq实现全选或者全不选

    $("#all").click(function () { if($(this).is(":checked")){ $("input[name='pr ...

随机推荐

  1. Java NIO(三) Buffer

    Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到通道中的. 缓冲区本质上是一块可以写入数据,然后可以从中读取数据的内存.这块内存被包装成NIO ...

  2. Set up ruby debugging environment

    Today I finally got ruby debugging working in Eclipse. Below are the major setup steps involved, as ...

  3. java面试题之----mysql表优化方案

    本文转载自segmentfault,原文链接:https://segmentfault.com/a/1190000006158186. 当MySQL单表记录数过大时,增删改查性能都会急剧下降,可以参考 ...

  4. Informatica学习笔记

    Informatica学习笔记1:UPDATE AS INSERT 问:要求实现每天抽取数据,而且是如果有改变才抽取更新,没有就不更新,因为源表中有最后修改时间的字段,我让它 和SESSION上次运行 ...

  5. django搭建简单开发项目流程(一)

    1 搭建环境 sudo apt-get install python3-pip 安装pip3 sudo pip3 install virtualenv 安装虚拟环境 virtualenv -p pyt ...

  6. Struts2学习-拦截器

    1.新建项目user4,建立好和user3一样的目录,与之相比只是添加几个类,主要是struts.xml和action类的改变,其结果没有太大的变化 struts,xml <?xml versi ...

  7. STC12C5A60S2 51单片机最小系统

                                                                                    STC12C5A60S2 一.根据芯片文 ...

  8. C++11之std::future和std::promise和std::std::packaged_task

    为什么C++11引入std::future和std::promise?C++11创建了线程以后,我们不能直接从thread.join()得到结果,必须定义一个变量,在线程执行时,对这个变量赋值,然后执 ...

  9. 动态规划(DP),最长递增子序列(LIS)

    题目链接:http://poj.org/problem?id=2533 解题报告: 状态转移方程: dp[i]表示以a[i]为结尾的LIS长度 状态转移方程: dp[0]=1; dp[i]=max(d ...

  10. [19/03/17-星期日] 常用类_Calendar日历类&GregorianCalendar公历日历类

    一.概念 Calendar 类是一个抽象类,为我们提供了关于日期计算的相关功能,比如:年.月.日.时.分.秒的展示和计算. GregorianCalendar 是 Calendar 的一个具体子类,提 ...