Question

这是我的代码：我已经为父母和孩子创建了复选框。我正在寻找以下代码的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);
    }
}

Answer 1

注意：这在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);
    }
});

Answer 2

JavaScript

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>

    <table style="width:100%">
      <tr>
        <td><input type="checkbox" name="selectall" id="parent_checkbox" class="selectall"/></td>    
      </tr>
      <tr>
        <td><input type="checkbox" name="ckbox[]" id="1" class="child_check" value="1" onclick="check()" /></td>    
      </tr>
      <tr>
        <td><input type="checkbox" name="ckbox[]" id="2" class="child_check" value="2" onclick="check()" /></td>    
      </tr>
      <tr>
        <td><input type="checkbox" name="ckbox[]" id="3" class="child_check" value="3" onclick="check()" /></td>    
      </tr>
      <tr>
        <td><input type="checkbox" name="ckbox[]" id="4" class="child_check" value="4" onclick="check()" /></td>    
      </tr>
      <tr>
        <td><input type="checkbox" name="ckbox[]" id="5" class="child_check" value="5" onclick="check()" /></td>    
      </tr>
    </table>

    </body>
    <script type="text/javascript">
        function check(){
            var checkbox = document.getElementsByName('ckbox[]');
            var ln = 0;
            for(var i=0; i< checkbox.length; i++) { //check for child checkboxes
            if(checkbox[i].checked)
                ln++
            }

            //select parent if all child are checked
            var all = document.getElementsByName('ckbox[]');
            var num    = all.length;        

            if(ln == num){
                document.getElementById("parent_checkbox").checked = true;
            }else{
                document.getElementById("parent_checkbox").checked = false;
            }
        }
    </script>
    </html>

如果选中了所有“子类别”复选框，则应自动选中“父”复选框

2 个答案: