Loading

bootstrap-select 设置全选 全不选 搜索框 header 关于全选按钮不显示问题=bootstrap-select.js不是完整的建议去官网下载完整版本的js和css 

<!DOCTYPE html>
<html>
<head>
    <title>jQuery bootstrap-select可搜索多选下拉列表插件</title>
    <script src="../js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../js/bootstrap-select.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap-select.css"/>
    <link href="../css/dist/css/bootstrap.css" rel="stylesheet"/>
    <script src="../css/dist/js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.selectpicker').selectpicker({
                'selectedText': 'cat',
                header: 'Select a condiment',
                'noneSelectedText': '请选择',
                'deselectAllText': '全不选',
                'selectAllText': '全选'
            });
        });
    </script>
</head>
<body>
<select class="selectpicker" multiple data-live-search="true" data-actions-box="true">
    <option>name</option>
    <option>addr</option>
    <option>email</option>
    <option selected>phone</option>
    <option>tel</option>
</select>
</body>
</html>
jq的全选和全不选
<ul>
  <li><input type="checkbox" name="child"> 拼单</li>
  <li><input type="checkbox" name="child"> 组团</li>
  <li><input type="checkbox" name="child"> 限购</li>
  <li><input type="checkbox" name="all" id="all">全部</li>
</ul>
$(document).ready(function(){

    // 全选和反选功能
    $('#all').click(function() {
      var all = $("input[name='all']").is(':checked');
      if(all) {
        $("input[name='child']").prop("checked", true);
      }else {
        $("input[name='child']").prop("checked", false);
      }
    })

    // 循环判断，单个未选中，取消全选，全部选中，勾上全选
    $("input[name=child]").click(function() {
      var showis = true;
      for (var i = 0; i < $("input[name=child]").length; i++) {
          if (!$($("input[name=child]")[i]).is(":checked")) {
              // 一个未选中，跳出循环
              showis = false;
              break;
          }
      }
      $("#all").prop("checked", showis);
    })

})
 
posted @ 2022-08-28 17:59  只要AD钙奶  阅读(316)  评论(0)    收藏  举报