Javascript + bootstrap + html implement full-layer selection of hierarchical multi-box and multi-choice function code instances

If you want to implement a hierarchical sorting and multi-choice function, you will first prefer to use a multi-layer label type to directly select and add it to the text field, next, I will introduce you to the full-layer selection and multi-choice functions of the hierarchical multi-selection box through html + javascript + bootstrap. For more information, see the following, first, I prefer to use a multi-layer label type and add it directly to the text field. Next I will introduce you to the full-layer selection and multi-selection functions of hierarchical multi-selection boxes through html + javascript + bootstrap.

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 implement the functions mentioned above,

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
  Version 1  
 
 
    
  
  
 V1.0.1
    
  
  
 V1.1.1
    
  
  
 V1.2.1
    
  
  
 V1.3.1
  
 
 
  Version 2  
 
 
    
  
  
 V2.0.1
    
  
  
 V2.1.1
    
  
  
 V2.2.1
  
 
 
  Version 3  
 
 
    
  
  
 V3.0.1
    
  
  
 V3.1.1
    
  
  
 V3.2.1
  
 
 
Select All

The above is the detailed content of the Full-layer full-selection and multi-Selection Function Code instances implemented by javascript + bootstrap + html. For more information, see other related articles in the first PHP community!