jquery制作带checkbox下拉多选

最新推荐文章于 2024-06-28 16:12:55 发布

MOFUN-未来可期

最新推荐文章于 2024-06-28 16:12:55 发布

阅读量1.8k

点赞数

分类专栏： jquery 文章标签： jquery下拉多选 jquery多选

本文链接：https://blog.csdn.net/chenrongchun89/article/details/80419259

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>下拉多选</title>
    <script src="jquery-1.9.1.js"></script>
  </head>
  <body>

<input class="hideVal" type="text" id="Countryval">
<div id="divCountry" name="divCountry" class="CheckMore">
  <div class="selectStr" id="divCountryVal"><span class="empty">— — </span><em><i class="iconfont icon-jiantou"></i></em></div>
  <div class="Countryselect">
    <div class="title">
      <label>
        <i class='iconfont icon-weixuanze'></i><i class='iconfont icon-xuanze1'></i>
        <input type="checkbox" name="" id="theadInp">All/deselect all
      </label>
    </div>
    <ul class="coutryList" id="coutryList">
      <li class="on"><label><i class="iconfont icon-weixuanze"></i><i class="iconfont icon-xuanze1"></i><input type="checkbox" name="" value="China" >China</label></li>
      <li><label><i class="iconfont icon-weixuanze"></i><i class="iconfont icon-xuanze1"></i><input type="checkbox" name="" value="UK" >UK</label></li>
    </ul>
  </div>
</div>
</body>
</html>

上面为Html部分，需要引入jquery

  $(function(){
    $(".selectStr").bind("click", function () {
      $(this).parent(".CheckMore").toggleClass("on");
    })
    countryList("divCountry","Countryval");//获取所有选中的值
    documentclick("divCountry");//点击其他地方下拉隐藏
    checkAll("theadInp", "divCountry","Countryval");//点击全选
    singleCheckbox("divCountry","Countryval");//单个选择
    setcountryList("divCountry", "China","Countryval")//编辑状态赋值

    function countryList(name,targetname) {
      $("#" + name + " .coutryList li").removeClass("on");
      var str = "";
      $("#" + name + " .coutryList input:checked").each(function () {
        str += $(this).val() + ",";
        $(this).parent("label").parent("li").addClass("on");
      })
      if (str.substr(str.length - 1, 1) == ",") {
        str = str.substring(0, str.length - 1);
      }
      console.log(str);
      if (str == "") {
        $("#" + name + " .selectStr span").html("— — ");
        $("#"+targetname).val("");
      } else {
        $("#"+targetname).val(str);
        $("#" + name + " .selectStr span").html(str);
      }
    }

    function checkAll(clickname, boxname,targetname) {
      $("#" + clickname).change(function () {
        $("#" + boxname + " .coutryList input:checkbox").prop("checked", $(this).prop('checked'));
        if ($(this).is(":checked")) {
          $("#" + boxname + " .Countryselect .title").addClass("on");
        } else {
          $("#" + boxname + " .Countryselect .title").removeClass("on");
        }
        countryList(boxname,targetname);
      })
    }

    function singleCheckbox(name,targetname) {
      $("#" + name + " .coutryList input:checkbox").on('click', function () {
        countryList(name,targetname);
        if ($("#" + name + " .coutryList input:checkbox").length === $("#" + name + " .coutryList input:checked").length) {
          $("#" + name + " .title input").prop("checked", true);
          $("#" + name + " .Countryselect .title").addClass("on");
        } else {
          $("#" + name + " .title input").prop("checked", false);
          $("#" + name + " .Countryselect .title").removeClass("on");
        }
      })
    }

    function documentclick(name) {
      $(document).bind('click', function (e) {
        var e = e || window.event; //浏览器兼容性 
        var elem = e.target || e.srcElement;
        while (elem) { //循环判断至跟节点，防止点击的是div子元素 
          if (elem.id && elem.id == name) {
            return;
          }
          elem = elem.parentNode;
        }
        $('#' + name).removeClass("on");; //点击的不是div或其子元素 
      });
    }

    function setcountryList(name, string,targetname) {
      var newArr = string.split(",");
      $("#" + name + " .coutryList input").each(function () {
      var thisinputVal = $(this).val();
      for (var i = 0; i < newArr.length; i++) {
        if (thisinputVal == newArr[i]) {
          $(this).parent("label").parent("li").addClass("on");
          $(this).prop("checked", true)
        }
      }
    })

    countryList(name,targetname)
    }
  })

上面为js部分，由于是封装的，如果没有特殊需要请不要改动html布局，改动后可能由于获取不到值而发生错误

下面为辅助的css部分，采用阿里图标做装饰

*{padding:0 0;margin:0 0;}
/*iconfont*/
@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_651952_5l1nv1paksm7vi.eot?t=1527043104477'); /* IE9*/
  src: url('//at.alicdn.com/t/font_651952_5l1nv1paksm7vi.eot?t=1527043104477#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAXQAAsAAAAACIwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kg3Y21hcAAAAYAAAABwAAABsv89029nbHlmAAAB8AAAAdEAAAIo3srAG2hlYWQAAAPEAAAALwAAADYRdS49aGhlYQAAA/QAAAAcAAAAJAfeA4ZobXR4AAAEEAAAABMAAAAUE+kAAGxvY2EAAAQkAAAADAAAAAwBTgGybWF4cAAABDAAAAAeAAAAIAEUAF1uYW1lAAAEUAAAAUUAAAJtPlT+fXBvc3QAAAWYAAAANgAAAEvFMBxWeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/s04gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDzzYm7438AQw9zA0AAUZgTJAQAp0wy5eJzFkbENgDAMBM8hIITomYCOIaiZhYqKib0GfGIKmIC3Lnq/rCRKgBZoxCIy2IFRtCu1mjcMNc+s6gd6kur0yWffrkvZ24dMc1HFZ+2RZDp+k/139FdjXden04tzPuiKPgUl9zkov+NbQLoBjPUVdHicTVE9j9NAEN3ZPXudI7HxruOvxLE3yXnvdBB0juM7CV2uiUAgCiQqSigjQUlAonCDRIEQ1UFDA0h0FFSATqKhhg5KhED8CuKwIRRZjfaN5j3Nm9EgDaHFD3JCfMTRNtpDE3QVIdB3oWviCITMB3gXmkJreo5JZE8K2usOyCF4Xd1xsyJPPZ3qFpjQgaHICjnAEkb5GJ+HzI0AglZ4jW21GXkCm77sPKgu4xfQjHtta3y2unTmyMkSbszqjAWMPTJ0TTMw3rBMuOW5Na22qVevNCtsnsQ7OIZ6IMMr1xtJi914mN+OtrwaQFkCbyXm6yM7tFXcD13OAnq6Yfhho9d3YPbrlM/rUfoTqYeXH3mD3yOmtkVcZK6aXs0uUwlpsV94e0/xl3gbgFXP+UFQ06pntuE7Ln6304l4lfoG0w34HhxwC1b9Fh/JJ3IRWShW/ewOeGIM+/YApDCBqlSokq1SoUp3IWnjY78PCufTdnKIJ0N8PJxghfPpEj/Ppyt6Jev76+Rk+H+HRbmBSKk8E3Wppc+aLwG9ew7SvMhigCJzHfLyzwc5AhhJcuEf3qkeG4z+piajX+Em5SYpFbkuqt5WM6oUzKLf4J4SKtu/2FdcRwAAAHicY2BkYGAAYh2h5N3x/DZfGbhZGEDgutZXBQT9v4GFgbkByOVgYAKJAgAEHwlJAHicY2BkYGBu+N/AEMPCAAJAkpEBFbACAEcLAm54nGNhYGBgfsnAwMKAwAAOmwD9AAAAAAAAdgCeANgBFHicY2BkYGBgZQgEYhBgAmIuIGRg+A/mMwAAES0BcgAAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAlZGJkZmRhZGVkY2BsYI9KzMxryS/lLM8NbOiNDGvKpUdQhkyMAAAqjgKYQAA') format('woff'),
  url('//at.alicdn.com/t/font_651952_5l1nv1paksm7vi.ttf?t=1527043104477') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_651952_5l1nv1paksm7vi.svg?t=1527043104477#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-jiantou:before { content: "\e64a"; }

.icon-weixuanze:before { content: "\e625"; }

.icon-xuanze1:before { content: "\e617"; }


#divCountry{position:relative;width:200px;margin:100px auto;border:1px solid #000;border-radius:5px;height:30px;line-height:30px;}
.Countryselect{position:absolute;border:1px solid #afd7ff;border-top: 0;overflow-y:auto;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12);box-sizing:border-box;padding:0;left:0;width:100%;z-index:99;background-color:#fff;display:none}
#divCountry.on .Countryselect{display:block;animation-name:layui-upbit;animation-duration:.3s;animation-fill-mode:both}
.coutryList li{line-height:36px;height:36px;padding:0 15px}
.Countryselect .title{height:36px;line-height:36px;padding:0 10px}
.Countryselect .title input,.coutryList li input{float:left;position:relative;top:10px;margin-right:5px}
.coutryList li label{display:block;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coutryList li.on{background-color:#eaeff4}
.coutryList li label input {display:none;}
.coutryList li label i {float:left;color:#009a27;margin-right:10px;}
.coutryList li label i.icon-weixuanze{display:block;}
.coutryList li.on label i.icon-weixuanze{display:none;}
.coutryList li label i.icon-xuanze1{display:none;}
.coutryList li.on label i.icon-xuanze1{display:block;}

.Countryselect .title label{display:block;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.Countryselect .title.on{background-color:#eaeff4}
.Countryselect .title label input {display:none;}
.Countryselect .title label i {float:left;color:#009a27;margin-right:10px;}
.Countryselect .title label i.icon-weixuanze{display:block;}
.Countryselect .title.on label i.icon-weixuanze{display:none;}
.Countryselect .title label i.icon-xuanze1{display:none;}
.Countryselect .title.on label i.icon-xuanze1{display:block;}

MOFUN-未来可期

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery制作带checkbox下拉多选

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;下拉多选&lt;/title&gt; &lt;script src="jquery-1.9.1.js"&gt;&lt;/script&g
复制链接

扫一扫

专栏目录