时间戳

首页 > 解决方案 > 如果所有子类别复选框均已选中，则应自动选中父复选框

javascript - 如果所有子类别复选框均已选中，则应自动选中父复选框

问题描述

这是我的代码：我为父母和孩子创建了复选框。我正在寻找以下代码的 Javascript 验证。当我选择父复选框正在选择的单个子复选框但我想选择所有子复选框时，只有父复选框应该选择。

<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[]" data-parent=3 >
      </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[]" data-parent=3 id="26">
      </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">bangles</span>
        <input class="wk_elements" type="checkbox" value="26" name="category[]" data-parent=3 id="26">
      </div>

var cb_list = document.getElementsByTagName('input');
for (var i = 0, len = cb_list.length; i < len; i++) {
    if (cb_list[i].type === 'checkbox') {
        cb_list[i].onclick = function(i) {
            return function() {
                checkParent(this);
            }
        }(i);
    }
}

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);
    }
}

标签： javascripthtml

解决方案

注意：这是在 jQuery

/* 顶部的单个复选框以选择所有子复选框 */

$('#parent_checkbox').on('click', function () {
    if (this.checked) {
        $('.child_check').each(function () {
            this.checked = true;
        });
    } else {
        $('.child_check').each(function () {
            this.checked = false;
        });
    }
});

/* 选中所有子复选框以选中父复选框 */

$(document).on('click', '.child_check', function () {
    if ($('.child_check:checked').length === $('.child_check').length) {
        $('#parent_checkbox').prop('checked', true);
    } else {
        $('#parent_checkbox').prop('checked', false);
    }
});

推荐阅读