Question

我已经嵌套了父和子类别的循环，现在我想要选择“如果我的孩子”，那么应该自动选择该子类别的所有父母。在我的代码中只检查了一个父，所以我该怎么做。如果我取消选中孩子，那么父母应该自动取消选中那是可能的。提前致谢。这是我的代码，

<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。

我删除了内联事件处理程序（onclick），将data-parent属性与每个子项相关联，并使用该属性在以下已审核的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一起玩，或者更清楚地指出它以获得进一步的帮助。

如果选择子类别复选框，则选中父复选框应自动选择

1 个答案: