子カテゴリチェックボックスが選択されている場合親チェックボックスが自動的に選択されます

Question

親カテゴリと子カテゴリのネストされたループがあります。 私の子供が選択されている場合、その子カテゴリのすべての親が自動的に選択されます。 私のコードでは1人の親しかチェックされていないので、どうすればいいですか？ また、もし私が子供のチェックを外したら、親は自動的にチェックを外すべきです それは可能です。 ありがとうございます。子供はあなたがその親をチェックするたかっチェックし、その親の親、など根までされたとき、私は右のそれを得た場合はここで は、私のコードです

<label>Product Category:</label> 
 
<div class="wk_field wk_category"> 
 
<div class="wk_for_validation"> 
 
<div id="wk_category_label">CATEGORIES</div> 
 
<div class="wk_cat_container" style="margin-left:0px;"> 
 
<span class="wk_minus"> </span> 
 
<span class="wk_foldersign"></span> 
 
<span class="wk_elements wk_cat_name">Gold</span> 
 
<input class="wk_elements" type="checkbox" value="3" name="category[]" id="3"> 
 
</div> 
 
<div class="wk_removable wk_cat_container" style="margin-left: 20px;"> 
 
<span class="wk_no"></span> 
 
<span class="wk_foldersign"></span> 
 
<span class="wk_elements wk_cat_name">Earrings</span> 
 
<input class="wk_elements" type="checkbox" value="27" name="category[]" onclick="checkParent('3', this)"> 
 
</div> 
 
<div class="wk_removable wk_cat_container" style="margin-left: 20px;"> 
 
<span class="wk_minusend"></span> 
 
<span class="wk_foldersign"></span> 
 
<span class="wk_elements wk_cat_name">Rings</span> 
 
<input class="wk_elements" type="checkbox" value="26" name="category[]" onclick="checkParent('3', this)" id="26"> 
 
</div> 
 
<div class="wk_removable wk_cat_container" style="margin-left: 40px;" > 
 
<span class="wk_no"></span> 
 
<span class="wk_foldersign"></span> 
 
<span class="wk_elements wk_cat_name">Ladies</span> 
 
<input class="wk_elements" type="checkbox" value="37" name="category[]" onclick="checkParent('26', this)"> 
 
</div> 
 
<div class="wk_removable wk_cat_container" style="margin-left: 40px;"> 
 
<span class="wk_no"></span> 
 
<span class="wk_foldersign"></span> 
 
<span class="wk_elements wk_cat_name">Gents</span> 
 
<input class="wk_elements" type="checkbox" value="36" name="category[]" onclick="checkParent('26', this)"> 
 
</div> 
 
<div class="wk_removable wk_cat_container" style="margin-left: 20px;"> 
 
<span class="wk_no"></span> 
 
<span class="wk_foldersign"></span> 
 
<span class="wk_elements wk_cat_name">Bangles</span> 
 
<input class="wk_elements" type="checkbox" value="25" name="category[]" onclick="checkParent('3', this)"> 
 
</div> 
 

 
<script type="text/javascript"> 
 
function checkParent(id, ele) { 
 
    var parent = document.getElementById(id); 
 
    if (ele.checked === true) parent.checked = true; 
 
} 
 
</script>

Answer 1

。 その場合は、this fiddle I createdをチェックしてください。私はそれぞれの子にdata-parent属性を関連付けられている、（onclickの）インラインイベントハンドラを削除し、次の見直しcheckParent機能に木を登るために属性を使用

：また

function checkParent(ele) { 
    var idparent = ele.getAttribute('data-parent'); 
    if(idparent){ 
    var parent = document.getElementById(idparent); 
    if (ele.checked === true) parent.checked = true; 
    checkParent(parent); 
    } 
} 

、私はしませんでした子供の未チェックのイベントをどのように正確に機能させたいのかを理解するには、jsfiddleで試してみるか、それをもっと明確に指摘してください。