0

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

2 回答 2

0

注意：这是在 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);
    }
});
于 2019-03-25T06:35:27.867 回答
0

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>
于 2019-03-25T11:55:48.210 回答