複数のメインオプションでネストされたチェックボックスが動作しない

私はHTMLページにネストされたチェックボックスを実装するために、次のようにcodepen snippetを使用しました。元のコードは、ネストされたチェックボックスの1つのセットのみを処理したので、複数に展開しようとしました。しかし、この場合の最後のMain要素では、Main2では動作しますが、前の要素では動作していないようです。複数のメインオプションでネストされたチェックボックスが動作しない

function loadExpandableCheckboxes() { 
 
\t 
 
\t var expandableCheckboxes = document.getElementsByClassName("expandable-checkbox"); 
 
\t for (var i = 0; i < expandableCheckboxes.length; i++) { 
 
\t \t 
 
\t \t var checkboxMainOption = expandableCheckboxes[i].getElementsByClassName("expandable-checkbox-main-option")[0]; 
 
\t \t 
 
\t \t var checkboxSubOptions = expandableCheckboxes[i].getElementsByClassName("expandable-checkbox-sub-option"); 
 
\t \t for (var j = 0; j < checkboxSubOptions.length; j++) { 
 
\t \t \t 
 
\t \t \t checkboxSubOptions[j].onclick = function() { 
 
\t \t \t \t 
 
\t \t \t \t var checkedCount = 0; 
 
\t \t \t \t for (var k = 0; k < checkboxSubOptions.length; k++) { 
 
\t \t \t \t \t if (checkboxSubOptions[k].checked) { 
 
\t \t \t \t \t \t checkedCount++; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t checkboxMainOption.checked = checkedCount > 0; 
 
\t \t \t \t checkboxMainOption.indeterminate = checkedCount > 0 && checkedCount < checkboxSubOptions.length; 
 
\t \t \t } 
 
\t \t } 
 
\t \t 
 
\t \t checkboxMainOption.onclick = function() { 
 
\t \t \t 
 
\t \t \t for (var j = 0; j < checkboxSubOptions.length; j++) { 
 
\t \t \t \t checkboxSubOptions[j].checked = checkboxMainOption.checked; 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
} 
 
onload=loadExpandableCheckboxes;

body { 
 
    color: #555; 
 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
li { 
 
    margin-top: 1em; 
 
} 
 

 
label { 
 
    font-weight: bold; 
 
}

<html> 
 
    <head> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div class="checkbox-container"> 
 
     <ul> 
 
     <li> 
 
\t \t <div class="expandable-checkbox"> 
 
      <label><input type="checkbox" class="expandable-checkbox-main-option">Main 1</label> 
 
      <ul> 
 
       <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 1</label></li> 
 
       <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 2</label></li> 
 
       <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 3</label></li> 
 
      </ul> 
 
\t \t </div> 
 
     </li> 
 
     <li> 
 
\t \t <div class="expandable-checkbox"> 
 
      <label><input type="checkbox" class="expandable-checkbox-main-option">Main 2</label> 
 
      <ul> 
 
       <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 1</label></li> 
 
       <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 2</label></li> 
 
       <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 3</label></li> 
 
      </ul> 
 
\t \t </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
\t 
 
    </body> 
 
</html>

出典

2017-10-26 TheLethalCoder

これは楽しいものでした。基本的に、チェックボックスの最初のセットを2番目のセットで上書きしないようにするには、一時的なスコープを使用して変数を保持する必要があります。以下のスニペットでは、iループにIFFEを追加したことがわかります。

これは変数iを受け取り、すぐにそれを呼び出す一時関数に渡します。次回ループが実行されると、新しい一時関数が "作成され"、最後のものの範囲が保持され、前のチェックボックスセットを上書きしません。

$(document).ready(function() { 
 
    //find the wrappers 
 
    var expandableCheckboxes = document.getElementsByClassName("expandable-checkbox"); 
 
    //loop through the wrappers, count them one by one 
 
    for (var i = 0; i < expandableCheckboxes.length; i++) (function(i){ 
 
    
 
    //find the the main 
 
    var checkboxMainOption = expandableCheckboxes[i].getElementsByClassName("expandable-checkbox-main-option")[0]; 
 
    //find the subs 
 
    var checkboxSubOptions = expandableCheckboxes[i].getElementsByClassName("expandable-checkbox-sub-option"); 
 
    //loop through subs 
 
    for (var k = 0; k < checkboxSubOptions.length; k++) { 
 
     
 
     //add listener fo each sub 
 
     checkboxSubOptions[k].onclick = function() { 
 
     var checkedCount = 0; 
 
     for (var j = 0; j < checkboxSubOptions.length; j++) { 
 
      if (checkboxSubOptions[j].checked) { 
 
      checkedCount++; 
 
      } 
 
     } 
 
     //mark appropriately 
 
     checkboxMainOption.checked = checkedCount > 0; 
 
     checkboxMainOption.indeterminate = checkedCount > 0 && checkedCount < checkboxSubOptions.length; 
 
     } 
 
    } 
 
    //add listener to main 
 
    checkboxMainOption.onclick = function() { 
 
     for (var j = 0; j < checkboxSubOptions.length; j++) { 
 
     checkboxSubOptions[j].checked = checkboxMainOption.checked; 
 
     } 
 
    } 
 
    })(i) 
 
});

body { 
 
    color: #555; 
 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
li { 
 
    margin-top: 1em; 
 
} 
 

 
label { 
 
    font-weight: bold; 
 
}

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="checkbox-container"> 
 
    <ul> 
 
     <li> 
 
     <div class="expandable-checkbox"> 
 
      <label><input type="checkbox" class="expandable-checkbox-main-option">Main 1</label> 
 
      <ul> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 1</label></li> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 2</label></li> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 3</label></li> 
 
      </ul> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="expandable-checkbox"> 
 
      <label><input type="checkbox" class="expandable-checkbox-main-option">Main 2</label> 
 
      <ul> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 1</label></li> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 2</label></li> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 3</label></li> 
 
      </ul> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-10-26 15:26:34 amflare

あなたはjQueryのを使用して気にしない場合は、ここであなたのJSを短縮することができます。以下のスニペットを試してみてください。

$(document).ready(function() { 
 
    $('.expandable-checkbox-main-option').change(function() { 
 
    $(this).parent().parent('div').find('.expandable-checkbox-sub-option').prop('checked', $(this).prop('checked')); 
 
    }); 
 

 
    $('.expandable-checkbox-sub-option').change(function() { 
 
    var parentCheckboxDiv = $(this).parent().parent().parent().parent('div'); 
 
    var parentCheckbox = parentCheckboxDiv.find('.expandable-checkbox-main-option'); 
 
    var checkedSubOptions = parentCheckboxDiv.find('.expandable-checkbox-sub-option:checked'); 
 
    var subOptions = parentCheckboxDiv.find('.expandable-checkbox-sub-option'); 
 

 
    parentCheckbox.prop('indeterminate', checkedSubOptions.length && checkedSubOptions.length != subOptions.length); 
 
    parentCheckbox.prop('checked', checkedSubOptions.length == subOptions.length) 
 
    }); 
 
});

body { 
 
    color: #555; 
 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
li { 
 
    margin-top: 1em; 
 
} 
 

 
label { 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="checkbox-container"> 
 
    <ul> 
 
    <li> 
 
     <div class="expandable-checkbox"> 
 
     <label><input type="checkbox" class="expandable-checkbox-main-option">Main 1</label> 
 
     <ul> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 1</label></li> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 2</label></li> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 1 Sub 3</label></li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="expandable-checkbox"> 
 
     <label><input type="checkbox" class="expandable-checkbox-main-option">Main 2</label> 
 
     <ul> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 1</label></li> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 2</label></li> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 2 Sub 3</label></li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="expandable-checkbox"> 
 
     <label><input type="checkbox" class="expandable-checkbox-main-option">Main 3 (5 options)</label> 
 
     <ul> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 3 Sub 1</label></li> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 3 Sub 2</label></li> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 3 Sub 3</label></li> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 3 Sub 4</label></li> 
 
      <li><label><input type="checkbox" class="expandable-checkbox-sub-option">Main 3 Sub 5</label></li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

出典

2017-10-26 15:10:18

私は私が見る – TheLethalCoder

サブのチェックボックスをクリックしたときにこれがあり一部の方法ですが、それは動作しません - 私は私の答えを更新しました。それはあなたが探しているものですか？ –

これはうまくいきます – TheLethalCoder

複数のメインオプションでネストされたチェックボックスが動作しない

答えて

関連する問題