jquery实现bootstrap全选全不选功能

最新推荐文章于 2024-01-23 15:55:48 发布

不言而喻i

最新推荐文章于 2024-01-23 15:55:48 发布

阅读量2k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/yu_hongrun/article/details/82895135

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js代码

 m.checkAll = function ($select) {
        var options = $select.find("option");
        var lis = $select.next("div").find("div ul li");
        var values = $select.find("option:selected").text();
        if(values.indexOf("全选")!=-1){
            $.each(options, function(i,v) {
                if($(v).html()!="全不选"&&$(v).html()!="全选"){
                    $(lis[i]).addClass("selected")
                    v.selected=true;
                }else {
                    $(lis[i]).removeClass("selected");
                    v.selected=false;
                }
            });
        }
        if(values.indexOf("全不选")!=-1){
            $.each(options, function(i,v) {
                    $(lis[i]).removeClass("selected");
                    v.selected=false;
            });
        }
    }
    
/**
 * 选中年份在已选年份下加入已选择年份的标签
 */
$("#chartForm [name=year]").change(function () {
    $("#label_div").show();
    meara.checkAll($("#chartForm [name=year]"));
    var selectedValues = $("#chartForm [name=year] option:checked").text();
    var optionList = $("#chartForm [name=year] option");
    var html = "";
    $.each(optionList,function (i,v) {
        if(v.selected){
            html += ' <span class="label label-info">'+v.text+'</span>'
        }
    })
    $("#labelYear").html(html);
});

html代码

 				<div class="form-group col-lg-2  col-sm-6">
                <div class="input-group">
                <span class="input-group-addon">年份</span>
                <select name="year" class="selectpicker" multiple
                data-server-load="enquirySchoolYear"
                data-val="true"
                data-val-required="请选择年份"
                data-val-tooltip="true">
                <option>全选</option>
                <option>全不选</option>
                <select>
                </div>
                </div>