您现在的位置是：首页 > 文章详情

下拉复选框

日期：2018-08-07点击：391收藏

最近在项目开发中，有的地方用到了下拉复选框，于是再网上找了一下，有很多种写法，但自己感觉不是很好，又不想用插件，因为感觉引入的js太大，功能太繁杂，于是决定自己写一个小demo，效果如下：

（改善：当遇到选项比较多时，可以定义一个数组插入到HTML中，实现下拉的选项，可以参考省市区联动的写法：https://www.cnblogs.com/lprosper/p/9313536.html）

CSS:

 1 div {  2  display: inline-block;  3 }  4  5 select {  6  min-width: 200px;  7  height: 25px;  8  border: 1px solid #000;  9 } 10 11 ul { 12  display: none; 13  list-style: none; 14  margin: 0; 15  padding: 0; 16  border: 1px solid #000; 17 } 18 19 label { 20  display: block; 21  padding: 2px 10px; 22  white-space: nowrap; 23 } 24 25 ul li:hover { 26  background-color: #aabbcc; 27 }

HTML:

 1 <div>  2 <select name="" id="lang1"></select>  3 <ul id="ck1">  4 <li>  5 <label><input type="checkbox">HTML</label>  6 </li>  7 <li>  8 <label><input type="checkbox">CSS</label>  9 </li> 10 <li> 11 <label><input type="checkbox">JavaScript</label> 12 </li> 13 <li> 14 <label><input type="checkbox">jQuery</label> 15 </li> 16 <li> 17 <label><input type="checkbox">PHP</label> 18 </li> 19 <li> 20 <label><input type="checkbox">MySQL</label> 21 </li> 22 </ul> 23 </div> 24 <hr><!--HTML结构不能变--> 25 <div> 26 <select name="" id="lang2"></select> 27 <ul id="ck2"> 28 <li> 29 <label><input type="checkbox">Java</label> 30 </li> 31 <li> 32 <label><input type="checkbox">C#</label> 33 </li> 34 <li> 35 <label><input type="checkbox">C++</label> 36 </li> 37 <li> 38 <label><input type="checkbox">Pyhton</label> 39 </li> 40 </ul> 41 </div> 42 <input type="button" onclick="console.log({'tag1':tag1,'tag2':tag2,})" value="查看字段">

JavaScript:

 1 /**  2  * [dropDownCk 下拉复选框]  3  * @param {[String]} boxId [父级元素id]  4  * @param {[String]} selectId [下拉选id]  5  * @param {[String]} hiddenId [隐藏区域id]  6  * @return {[Array]} [description]  7 */  8 function dropDownCk(selectId,hiddenId) {  9 10 var boxId = "#" + boxId, 11 selectId = "#" + selectId, 12 hiddenId = "#" + hiddenId; 13 14 $(hiddenId).mouseleave(function(){ // 鼠标离开隐藏复选区域 15 16 $(this).hide(); 17 18  }); 19 20 $(selectId).click(function() { // 切换显示与隐藏 21 22  $(hiddenId).toggle(); 23 24  }); 25 26 var tagArr = []; // 接收复选字段数组 27 28 $(selectId).html("<option checked='true' style='display:none;'>" + "请选择项目" + "</option>"); 29 30 $(hiddenId + ' label').find('input').click(function() { // 点击向数组添加元素 31 32 if ($(this).is(':checked')) { 33 34 tagArr.push($(this).parent().text()); 35 36 $(selectId).html("<option checked='true' style='display:none;'>" + tagArr.join(",") + "</option>"); 37 38 } else { 39 40 tagArr.splice(tagArr.indexOf($(this).parent().text()), 1); // 删除对应元素 41 42 if (tagArr.length == 0) { 43 44 $(selectId).html("<option checked='true' style='display:none;'>" + "请选择项目" + "</option>"); 45 46 } else { 47 48 $(selectId).html("<option checked='true' style='display:none;'>" + tagArr.join(",") + "</option>"); 49 50  } 51 52  } 53 54  }); 55 56 return tagArr; 57  } 58 59 var tag1 = dropDownCk("lang1","ck1"); 60 var tag2 = dropDownCk("lang2","ck2");