自动检查父复选框 [英] auto check parent checkbox

问题描述

我有一个AJAX请求，它带有一个文件夹列表，每个列表项旁边都有一个复选框。如果我选中父文件夹旁边的复选框，我会自动检查所有子文件夹：

  var checkChildCheckBoxes = function（）{
 var isAlreadyChecked = $（this）.attr（'isChecked'）; 
 if（isAlreadyChecked =='true'）{
 $（this）.parents（'：eq（1）'）。find（'。userPermissionCheckBox'）。each（function（）{
 $（this）.prop（'checked'，false）; 
}）; 
 $（this）.attr（'isChecked'，'false'）; 
} 
 else {
 $（this）.parents（'：eq（1）'）。find（'。userPermissionCheckBox'）。each（function（）{
 $ （this）.prop（'checked'，true）; 
}）; 
 $（this）.attr（'isChecked'，'true'）; 
} 
} 
  

这非常有效。我想要解决的是，如果您没有选中父复选框，并且您选中了一个子复选框，它将自动检查父级。

我试过没有成功这样做：

  if（$（this）.parent（'ul'）。find（'。userPermissionCheckBox ：eq（0）'）。is（'checked'））{
 
} 
 else {
 $（this）.parent（'ul'）。find（' .userPermissionCheckBox：eq（0）'）。prop（'checked'，true）; 
} 
  

我不想用代码加载这个问题，所以我做了一个小提琴显示列表的结构以及我使用它的方式。转到这里：。那篇文章不仅解释了不确定的复选框，而且还有一个演示，其中包含了您想要的内容。中间的使用案例？部分 - 虽然文章说演示是不完整的，因为它只检查一个级别。以下是演示使用的代码：

  $（function（）{
 / /显然点击是更好的变更？Cuz IE？
 $（'input [type =checkbox]'）。change（function（e）{
 var checked = $（this）.prop（ checked），
 container = $（this）.parent（），
 siblings = container.siblings（）; 
 
 container.find（'input [type =复选框]'）。prop（{
 indeterminate：false，
 checked：checked 
}）; 
 
 function checkSiblings（el）{
 var parent = el.parent（）。parent（），
 all = true; 
 
 el.siblings（）。each（function（）{
 return all =（$（这个）.children（'input [type =checkbox]'）。prop（checked）=== checked）; 
}）; 
 
 if（all&& ;已检查）{
 parent.children（'input [type =checkbox]'）。prop（{
 indeterminate：false，
 checked：checked 
}）; 
 checkSiblings（parent）; 
}否则if（all&&！checked）{
 parent.children（'input [type =checkbox]'）。prop（checked，checked）; 
 parent.children（'input [type =checkbox]'）。prop（indeterminate，（parent.find（'input [type =checkbox]：checked'）。length> 0） ）; 
 checkSiblings（parent）; 
} else {
 el.parents（li）。children（'input [type =checkbox]'）。prop（{
 indeterminate：true，
 checked ：false 
}）; 
} 
} 
 
 checkSiblings（container）; 
}）; 
}）; 
  

I have an AJAX request that pulls in a list of folders with a checkbox next to each list item. If I check the checkbox next to a parent folder, I have all of the children folders automatically check by doing this:

var checkChildCheckBoxes = function(){
            var isAlreadyChecked = $(this).attr('isChecked');
            if(isAlreadyChecked == 'true'){
                $(this).parents(':eq(1)').find('.userPermissionCheckBox').each(function(){
                    $(this).prop('checked', false);
                });
                $(this).attr('isChecked', 'false');
            }
            else{   
                $(this).parents(':eq(1)').find('.userPermissionCheckBox').each(function(){
                    $(this).prop('checked', true);
                });
                $(this).attr('isChecked', 'true');
            }
        }

This works splendidly. What I'm trying to solve is if you DID NOT have the parent checkbox checked and you check a child checkbox, it will automatically check the parent.

I tried with no success to do it like this:

if($(this).parent('ul').find('.userPermissionCheckBox:eq(0)').is('checked')){

                }
                else{
                    $(this).parent('ul').find('.userPermissionCheckBox:eq(0)').prop('checked', true);
                }

I didn't want to load this question with code, so I made a fiddle displaying how the list is structured and the way I'm using it. Go here: http://jsfiddle.net/BTXNk/1/ I'm kind of a n00b with Javascript, hope this question isn't stupid. Thank you for taking the time to read it. http://jsfiddle.net/BTXNk/1/

解决方案

As Matt said, you need a three-state checkbox, with a state for when some sub-items are checked and some are not.

You can do a three-state checkbox by making "indeterminate" the third state. You can set a checkbox to "indeterminate" with $(this).prop("indeterminate", true);. The checkbox will then look something like this: .

See this article on indeterminate checkboxes. That article not only explains indeterminate checkboxes, but has a demo of exactly what you want in the "Use Case?" section in the middle – though the article says that demo is incomplete because it only checks one level up. Here is the code that demo uses:

$(function() {
    // Apparently click is better chan change? Cuz IE?
    $('input[type="checkbox"]').change(function(e) {
        var checked = $(this).prop("checked"),
        container = $(this).parent(),
        siblings = container.siblings();

        container.find('input[type="checkbox"]').prop({
            indeterminate: false,
            checked: checked
        });

        function checkSiblings(el) {
            var parent = el.parent().parent(),
            all = true;

            el.siblings().each(function() {
                return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
            });

            if (all && checked) {
                parent.children('input[type="checkbox"]').prop({
                    indeterminate: false,
                    checked: checked
                });
                checkSiblings(parent);
            } else if (all && !checked) {
                parent.children('input[type="checkbox"]').prop("checked", checked);
                parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
                checkSiblings(parent);
            } else {
                el.parents("li").children('input[type="checkbox"]').prop({
                    indeterminate: true,
                    checked: false
                });
            }
        }

        checkSiblings(container);
    });
});

这篇关于自动检查父复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！