Html + javascript + bootstrap supports full-layer selection and multi-selection of hierarchical multi-box, and bootstrap-level

Html + javascript + bootstrap supports full-layer selection and multi-selection of hierarchical multi-box, and bootstrap-level

If you want to implement a hierarchical sorting and multi-choice function, you will first prefer to use a multi-layer label type and add it directly to the text field. This article is very detailed, if you need to do the functions mentioned above, you can refer to this address, http://mrthink.net/jquery-plugin-iselecttags/

However, considering that the number of options to be selected is uncertain and may be very large, it is easy to use labels for visual fatigue. It also requires that the layout and effect of the web page be minimized as the number of options changes, select the multi-choice box at the level, that is, set the common effect of the computer. The second-level option can be folded/expanded to the bottom of the first layer.data-toggle="collapse" data-target="#demo1" To join the second-layer folding effect.

The Code is as follows:

<Script> // when the first-level option is selected, all the second-level options under this option are selected function allSelect (check_v, checkname) {var v_item = document. getElementsByName (check_v); var items = document. getElementsByName (checkname); for (var I = 0; I <items. length; ++ I) {if (v_item [0]. checked) {items [I]. checked = true;} else {items [I]. checked = false ;}}// when all the second-level options are selected, the first layer is selected. if at least one of the second-level options is not selected, function singleSelect2parent (check_v, checkname) {var v_item = document. getElementsByName (check_v); var items = document. getElementsByName (checkname); var childStatus = true; for (var I = 0; I <items. length; ++ I) {childStatus = (childStatus & items [I]. checked);} if (childStatus) {v_item [0]. checked = true;} else {v_item [0]. checked = false ;}// select all. Click Select All. function allChecked () {var inputItems = document is selected for all options. getElementsByClassName ("checkbox2check"); for (var I = 0; I <inputItems. length; I ++) {var checkItems = document. getElementsByName ("checkbox" + (I + 1); for (var j = 0; j <checkItems. length; j ++) {checkItems [j]. checked = true;} inputItems [I]. checked = true ;}</script> <style> ul li {list-style: none ;} </style> <div> <input class = "checkbox2check" type = "checkbox" checked name = "checkbox_v1" value = "version1" onclick = "allSelect ('checkbox _ v1', 'checkbox1 ') "> <a data-toggle =" collapse "data-target =" # demo1 "> Version 1 <B class =" caret "> </B> </a> <ul id = "demo1" class = "collapse in"> <li> <input type = "checkbox" checked name = "checkbox1" value = "layer1" onclick = "singleSelect2parent ('checkbox _ v1 ', 'checkbox1 ') "> v1.0.1 </li> <input type =" checkbox "checked name =" checkbox1 "value =" layer2 "onclick =" singleSelect2parent ('checkbox _ v1 ', 'checkbox1 ') "> V1.1.1 </li> <input type =" checkbox "checked name =" checkbox1 "value =" layer3 "onclick =" singleSelect2parent ('checkbox _ v1 ', 'checkbox1 ') "> V1.2.1 </li> <input type =" checkbox "checked name =" checkbox1 "value =" layer4 "onclick =" singleSelect2parent ('checkbox _ v1 ', 'checkbox1 ') "> V1.3.1 </li> </ul> </div> <input class =" checkbox2check "type =" checkbox "checked name =" checkbox_v2 "value =" version2 "onclick =" allSelect ('checkbox _ v2 ', 'checkbox2 ') "> <a data-toggle =" collapse "data-target =" # demo2 "> Version 2 <B class =" caret "> </B> </a> <ul id = "demo2" class = "collapse in"> <li> <input type = "checkbox" checked name = "checkbox2" value = "layer5" onclick = "singleSelect2parent ('checkbox _ v2 ', 'checkbox2 ') "> V2.0.1 </li> <input type =" checkbox "checked name =" checkbox2 "value =" layer6 "onclick =" singleSelect2parent ('checkbox _ v2 ', 'checkbox2 ') "> V2.1.1 </li> <input type =" checkbox "checked name =" checkbox2 "value =" layer7 "onclick =" singleSelect2parent ('checkbox _ v2 ', 'checkbox2 ') "> V2.2.1 </li> </ul> </div> <input class =" checkbox2check "type =" checkbox "checked name =" checkbox_v3 "value =" version3 "onclick =" allSelect ('checkbox _ v3 ', 'checkbox3 ') "> <a data-toggle =" collapse "data-target =" # demo3 "> Version 3 <B class =" caret "> </B> </a> <ul id = "demo3" class = "collapse in"> <li> <input type = "checkbox" checked name = "checkbox3" value = "layer8" onclick = "singleSelect2parent ('checkbox _ v3 ', 'checkbox3 ') "> V3.0.1 </li> <input type =" checkbox "checked name =" checkbox3 "value =" layer9 "onclick =" singleSelect2parent ('checkbox _ v3 ', 'checkbox3 ') "> V3.1.1 </li> <input type =" checkbox "checked name =" checkbox3 "value =" layer10 "onclick =" singleSelect2parent ('checkbox _ v3 ', 'checkbox3 ') "> V3.2.1 </li> </ul> </div> <button type =" button "onclick =" allChecked () "> select all </button>

The above section describes the full-layer selection and multi-choice functions of the hierarchical multi-choice box in html + javascript + bootstrap. I hope this will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!