JavaScript+bootstrap+html은 계층적 다중 선택 상자에서 전체 레이어 선택 및 다중 선택 기능의 코드 예제를 구현합니다.

계층적으로 정렬이 가능하고 다중 선택이 가능한 기능을 만들고 싶습니다. 우선 다층 태그를 사용하고, 직접 선택하여 텍스트 필드에 추가하는 편입니다. 🎜>javascript+부트스트랩 계층적 다중 선택 상자의 전체 레이어 및 다중 선택 기능을 구현한 것이 필요한 친구들은 을 참고하세요. 계층별로 정렬되고 다중 선택이 가능한 기능을 만들고 싶은데, 먼저 다중 레이어 태그를 사용하려면 직접 선택하여 텍스트 필드에 추가하는 것이 매우 자세하게 설명되어 있습니다. 위에서 언급한 기능을 수행해야 한다면

그러나 옵션을 만들고자 하는 점을 고려하면 그 수가 불확실하고 매우 클 수도 있습니다. 옵션 수가 변경됨에 따라 웹 페이지의 레이아웃과 효과가 최소한으로 영향을 받기 때문에 컴퓨터를 설정할 때 일반적인 효과인 계층적 다중 선택 상자를 사용하기로 했습니다. 두 번째 레이어 옵션은 부트스트랩의

을 사용하여 두 번째 레이어의

접기 효과data-toggle="collapse" data-target="#demo1" 를 연결하여 첫 번째 레이어 아래에서 접거나 확장할 수 있습니다. 구체적인 코드는 다음과 같습니다.

<script>
//当第一层选项选定，则该选项下的第二层全部被选定
  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;
      }
    }
  }
//当第二层选项全部被选定，则第一层被选定；若第二层选项至少有一个没被选定，则第一层不被选定
  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;
    }
  }
//全选按钮，点击全选，则所有选项被选中
  function allChecked() {
    var inputItems = document.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>
<p>
  <input class="checkbox2check" type="checkbox" checked name="checkbox_v1" value="version1" onclick="allSelect(&#39;checkbox_v1&#39;, &#39;checkbox1&#39;)">
  <a data-toggle="collapse" data-target="#demo1">版本一<b class="caret"></b></a>
  <ul id="demo1" class="collapse in">
    <li> <input type="checkbox" checked name="checkbox1" value="layer1" onclick="singleSelect2parent(&#39;checkbox_v1&#39;, &#39;checkbox1&#39;)">v1.0.1</li>
    <li> <input type="checkbox" checked name="checkbox1" value="layer2" onclick="singleSelect2parent(&#39;checkbox_v1&#39;, &#39;checkbox1&#39;)">V1.1.1</li>
    <li> <input type="checkbox" checked name="checkbox1" value="layer3" onclick="singleSelect2parent(&#39;checkbox_v1&#39;, &#39;checkbox1&#39;)">V1.2.1</li>
    <li> <input type="checkbox" checked name="checkbox1" value="layer4" onclick="singleSelect2parent(&#39;checkbox_v1&#39;, &#39;checkbox1&#39;)">V1.3.1</li>
  </ul>
</p>
<p>
  <input class="checkbox2check" type="checkbox" checked name="checkbox_v2" value="version2" onclick="allSelect(&#39;checkbox_v2&#39;, &#39;checkbox2&#39;)">
  <a data-toggle="collapse" data-target="#demo2">版本二<b class="caret"></b></a>
  <ul id="demo2" class="collapse in">
    <li> <input type="checkbox" checked name="checkbox2" value="layer5" onclick="singleSelect2parent(&#39;checkbox_v2&#39;, &#39;checkbox2&#39;)">V2.0.1</li>
    <li> <input type="checkbox" checked name="checkbox2" value="layer6" onclick="singleSelect2parent(&#39;checkbox_v2&#39;, &#39;checkbox2&#39;)">V2.1.1</li>
    <li> <input type="checkbox" checked name="checkbox2" value="layer7" onclick="singleSelect2parent(&#39;checkbox_v2&#39;, &#39;checkbox2&#39;)">V2.2.1</li>
  </ul>
</p>
<p>
  <input class="checkbox2check" type="checkbox" checked name="checkbox_v3" value="version3" onclick="allSelect(&#39;checkbox_v3&#39;, &#39;checkbox3&#39;)">
  <a data-toggle="collapse" data-target="#demo3">版本三<b class="caret"></b></a>
  <ul id="demo3" class="collapse in">
    <li> <input type="checkbox" checked name="checkbox3" value="layer8" onclick="singleSelect2parent(&#39;checkbox_v3&#39;, &#39;checkbox3&#39;)">V3.0.1</li>
    <li> <input type="checkbox" checked name="checkbox3" value="layer9" onclick="singleSelect2parent(&#39;checkbox_v3&#39;, &#39;checkbox3&#39;)">V3.1.1</li>
    <li> <input type="checkbox" checked name="checkbox3" value="layer10" onclick="singleSelect2parent(&#39;checkbox_v3&#39;, &#39;checkbox3&#39;)">V3.2.1</li>
  </ul>
</p>
<button type="button" onclick="allChecked()">全选</button>

위 내용은 JavaScript+bootstrap+html은 계층적 다중 선택 상자에서 전체 레이어 선택 및 다중 선택 기능의 코드 예제를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!