html+javascript+boottstrap 은 등급 다 중 선택 상자 의 전체 선택 과 다 중 선택 기능 을 실현 합 니 다.

먼저 등급 별로 정렬 하고 선택 할 수 있 는 기능 을 하려 면 먼저 다 중 탭 식 으로 텍스트 필드 에 추가 하 는 경향 이 있 습 니 다.이 글 을 찾 으 면 매우 상세 합 니 다.앞에서 말 한 기능 이 필요 하 다 면 이 주 소 를 참고 하 십시오.http://mrthink.net/jquery-plugin-iselecttags/
     그러나 선택 항목 이 불확실 하고 많 을 수 있 음 을 감안 하여 라벨 을 사용 하면 시각 적 으로 피로 하기 쉬 우 며 선택 항목 의 변화 에 따라 웹 페이지 의 구조 와 효과 에 최소 화 를 요구 하기 때문에 등급 의 다 중 선택 상자,즉 컴퓨터 를 설정 하 는 흔 한 효 과 를 선택한다.2 층 옵션 은 1 층 아래로 접 거나 펼 칠 수 있 으 며,boottstrapdata-toggle="collapse" data-target="#demo1" 으로 2 층 접 기 효 과 를 연결 할 수 있 습 니 다.
     구체 적 인 코드 는 다음 과 같다.

<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>
<div>
  <input class="checkbox2check" type="checkbox" checked name="checkbox_v1" value="version1" onclick="allSelect('checkbox_v1', 'checkbox1')"><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('checkbox_v1', 'checkbox1')">v1.0.1</li>
    <li> <input type="checkbox" checked name="checkbox1" value="layer2" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">V1.1.1</li>
    <li> <input type="checkbox" checked name="checkbox1" value="layer3" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">V1.2.1</li>
    <li> <input type="checkbox" checked name="checkbox1" value="layer4" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">V1.3.1</li>
  </ul>
</div>
<div>
  <input class="checkbox2check" type="checkbox" checked name="checkbox_v2" value="version2" onclick="allSelect('checkbox_v2', 'checkbox2')"><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('checkbox_v2', 'checkbox2')">V2.0.1</li>
    <li> <input type="checkbox" checked name="checkbox2" value="layer6" onclick="singleSelect2parent('checkbox_v2', 'checkbox2')">V2.1.1</li>
    <li> <input type="checkbox" checked name="checkbox2" value="layer7" onclick="singleSelect2parent('checkbox_v2', 'checkbox2')">V2.2.1</li>
  </ul>
</div>
<div>
  <input class="checkbox2check" type="checkbox" checked name="checkbox_v3" value="version3" onclick="allSelect('checkbox_v3', 'checkbox3')"><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('checkbox_v3', 'checkbox3')">V3.0.1</li>
    <li> <input type="checkbox" checked name="checkbox3" value="layer9" onclick="singleSelect2parent('checkbox_v3', 'checkbox3')">V3.1.1</li>
    <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()">  </button>

위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 html+javascript+boottstrap 은 등급 다 중 선택 상자 의 전체 선택 과 다 중 선택 기능 을 실현 합 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!