jquery实现bootstrap全选全不选功能

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap全选联动bug是指当使用bootstrap框架实现全选功能时,可能会出现一些问题或错误。 一种常见的bug是当使用checkbox实现全选功能时,全选按钮中了所有子复框,但是当手动勾或取消某一个子复框时,全选按钮的状态没有相应地更新。这个bug的原因是因为全选按钮的中状态是通过监听子复框的中事件来更新的,但是在子复框被勾或取消时,没有触发对应的事件来更新全选按钮的状态。解决这个问题可以通过给每个子复框添加一个事件监听器,当子复框的状态改变时,更新全选按钮的状态。 另一个常见的bug是当全选按钮的中状态和子复框的中状态不一致时,全选按钮的状态没有正确地反映出子复框的实际状态。这个bug的原因是因为全选按钮的中状态是根据子复框的中状态来确定的,但是当子复框被手动中或取消时,没有正确地更新全选按钮的状态。解决这个问题可以通过添加事件监听器,在子复框状态改变时,更新全选按钮的中状态。 除了以上这些常见的bug外,还可能会出现其他一些跟全选联动相关的问题,如全选按钮和子复框的样式不一致、全选按钮没有正确地计算子复框的数量等。解决这些问题可以通过仔细检查代码逻辑、查看相关文档或寻求帮助来解决。 总之,bootstrap全选联动bug是一种常见的问题,出现的原因有很多,解决方法也有很多,需要在具体的情况下进行分析和调试。希望以上回答能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值