jquery - JQuery：复选框如何在未选中父项时取消选中子项和子项

Question

我已经完成了选择部分，但是如何做取消选中部分。当我取消选中父项时，它将取消选中子项及其子项，当取消选中其子项时，将取消选中其子项。

我的代码是这样的：

桌子：

<table border="1">

 <tr>
   <td>Parent</td>
   <td>Child</td>
 </tr>
 <tr>
   <td><input type="checkbox" level="parent" name="someparent1" value="1">Parent 1</td>
   <td>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename1" value"1"> Child 1</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename2" value"2"> Child 2</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename1" value="3">Sub Child 1</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename2" value="3">Sub Child 2</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename3" value"3"> Child 3</li>
   </td>
 </tr>
 <tr>
   <td><input type="checkbox" level="parent" name="someparent1" value="1">Parent 2</td>
   <td>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename1" value"1"> Child 1</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename1" value="3">Sub Child 1</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename2" value="3">Sub Child 2</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename3" value="3">Sub Child 3</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename4" value="3">Sub Child 4</li>   
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename2" value"2"> Child 2</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename3" value"3"> Child 3</li>    
   </td>
 </tr>
 <tr>
   <td><input type="checkbox" level="parent" name="someparent1" value="1">Parent 3</td>
   <td>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename1" value"1"> Child 1</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename2" value"2"> Child 2</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename3" value"3"> Child 3</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;Others Reason: <input type="text" level="subchild" size="50" name="other" ></li>      
   </td>
 </tr>   

</table>

jQuery：

//for child checkbox clicked to select parent
$('input[@type=checkbox][level="child"]').click(function (event) {
        var checked = $(this).is(':checked');
        if (checked) {
            $(this).closest('td').parent().children('td').first('td').children('input[@type=checkbox][level="parent"]').attr('checked', true);
        }   

});

//for subchild checkbox clicked to select child + parent
$('input[@type=checkbox][level="subchild"]').click(function (event) {
            var checked = $(this).is(':checked');

            if (checked) {
// Two select Parent element   
$(this).closest('td').parent().children('td').first('td').children('input[@type=checkbox][level="parent"]').attr('checked', true);

// Two select Child element. You will have to loop through all the li elements to //find the appropriate child element 

                $(this).parent().prevAll('li').each(function () {
                    var found = $(this).children('input[@type=checkbox]').attr('level') == 'child';
                    if (found) {
                        $(this).children('input[@type=checkbox][level="child"]').attr('checked', true);
                        return false;
                    }//end if
                });
            }//end if
});



//for subchild text changed to select child + parent
$('input[@type=text][level="subchild"]').keyup(function(event) {
            var keyvalx = $(this).val();

            //if the value of the text area is not empty
            if (keyvalx != '') {
// Two select Parent element   
$(this).closest('td').parent().children('td').first('td').children('input[@type=checkbox][level="parent"]').attr('checked', true);

// Two select Child element. You will have to loop through all the li elements to //find the appropriate child element 

                $(this).parent().prevAll('li').each(function () {
                    var found = $(this).children('input[@type=checkbox]').attr('level') == 'child';
                    if (found) {
                        $(this).children('input[@type=checkbox][level="child"]').attr('checked', true);
                        return false;
                    }//end if
                });
            } //end if
});

jsfiddle：http: //jsfiddle.net/YDgHN/3/

任何帮助，将不胜感激。

Answer 1

我建议您将level属性更改为类或 HTML5 的自定义data-属性，因为它们当前无效，并且您的标记将无法验证。

话虽如此，以下内容可以解决问题：-

$('input[level="parent"]').click(function() {
    $(this).parent().next().find(':checkbox').prop('checked', false);                             
});

这是一个小提琴

Answer 2

修改后我认为这个版本是完美的：http: //jsfiddle.net/YDgHN/21/ 不要忘记其他帮助我的人：

1）JQuery：取消选中ul li中的子复选框

2）JQuery：具有 3 级自动选择子级或父级的复选框

<table border="1">

 <tr>
   <td>Parent</td>
   <td>Child</td>
 </tr>
 <tr>
     <td><input type="checkbox" data-level="parent" name="someparent1" value="1" />Parent 1</td>
   <td>
     <ul>  
         <li style="list-style-type:none;"><input type="checkbox" data-level="child"  name="somename1" value="1" /> Child 1</li>
         <li style="list-style-type:none;"><input type="checkbox" data-level="child"  name="somename2" value="2" /> Child 2 <br />
                <ul>
                    <li style="list-style-type:none;"><input type="checkbox" data-level="subchild" name="somename1" value="3" />Sub Child 1</li>
                    <li style="list-style-type:none;"><input type="checkbox" data-level="subchild" name="somename2" value="3" />Sub Child 2</li>
                </ul>
         </li>
         <li style="list-style-type:none;"><input type="checkbox" data-level="child"  name="somename3" value="3" /> Child 3</li>
     </ul>      
   </td>
 </tr>
 <tr>
     <td><input type="checkbox" data-level="parent" name="someparent1" value="1" />Parent 2</td>
   <td>
     <ul>
         <li style="list-style-type:none;"><input type="checkbox" data-level="child"  name="somename1" value= "1" /> Child 1<br /> 
                <ul>
                    <li style="list-style-type:none;"><input type="checkbox" data-level="subchild" name="somename1" value="3" />Sub Child 1</li>
                    <li style="list-style-type:none;"><input type="checkbox" data-level="subchild" name="somename2" value="3" />Sub Child 2</li>
                    <li style="list-style-type:none;"><input type="checkbox" data-level="subchild" name="somename3" value="3" />Sub Child 3</li>
                    <li style="list-style-type:none;"><input type="checkbox" data-level="subchild" name="somename4" value="3" />Sub Child 4</li>    
                </ul>
         </li>
         <li style="list-style-type:none;"><input type="checkbox" data-level="child"  name="somename2" value="2" /> Child 2</li>
         <li style="list-style-type:none;"><input type="checkbox" data-level="child"  name="somename3" value="3" /> Child 3</li>
     </ul>   
   </td>
 </tr>
 <tr>
     <td><input type="checkbox" data-level="parent" name="someparent1" value="1" />Parent 3</td>
   <td>
   <ul>
       <li style="list-style-type:none;"><input type="checkbox" data-level="child"  name="somename1" value="1" /> Child 1</li>
       <li style="list-style-type:none;"><input type="checkbox" data-level="child"  name="somename2" value="2" /> Child 2</li>
       <li style="list-style-type:none;"><input type="checkbox" data-level="child"  name="somename3" value="3" /> Child 3<br />
                <ul>
                    <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;Others Reason: <input type="text" data-level="subchild" size="50" name="other" /></li>
                </ul>
     </li>
   </ul>     
   </td>
 </tr>   

</table>

代码：

// ########################### for click child to check parent ###########################
$('input[type=checkbox][data-level="child"]').click(function (event) {
        var checked = $(this).is(':checked');
        if (checked) { //when child checked
            $(this).closest('td').parent().children('td').first('td').children('input[type=checkbox][data-level="parent"]').prop('checked', true); 
        } else { //when child un-checked
            //for click uncheck child to uncheck subchild
            $(this).parent().find('input[type=checkbox][data-level="subchild"]').prop('checked', false);
            //for clear text field  on current table row
            $(this).parent().find('input[type=text][data-level="subchild"]').val('');

            //to count checked child
            var countcheckedchild =  $(this).closest('ul').find('input[type=checkbox][data-level="child"]:checked').length;
            //if checked child == 0 then we uncheck the parent
            if (countcheckedchild == 0)
            {                            
                $(this).closest('td').parent().children('td').first('td').children('input[type=checkbox][data-level="parent"]').prop('checked', false); 
            }
        }
});




//###########################  for click parent to uncheck child+subchild+clear textfield ########################### 
$('input[data-level=parent]').click(function() {
//for uncheck all checkbox on current table row    
$(this).parent().next().find(':checkbox').prop('checked', false); 
//for clear text field  on current table row
$(this).parent().next().find('input[type=text][data-level="subchild"]').val('');
});

//########################### for click subchild to select child+parent ###########################
$('input[type=checkbox][data-level="subchild"]').click(function (event) {
        var checked = $(this).is(':checked');

        if (checked) { //when subchild checked
            // to check parent 
            $(this).closest('td').parent().children('td').first('td').children('input[type=checkbox][data-level="parent"]').prop('checked', true); 
            //to check child
            $(this).parents('li:last').children('input[type=checkbox][data-level="child"]').prop('checked', true); 
        } else { //when subchild unchecked

            //count how many checked subchild left
            var countcheckedsubchild =  $(this).closest('ul').find('input[type=checkbox][data-level="subchild"]:checked').length;
            //if checked child == 0 then we uncheck the child
            if (countcheckedsubchild == 0)
            {
                $(this).parents('li:last').children('input[type=checkbox][data-level="child"]').prop('checked', false); 

                // to count how many child selected  
                var countcheckedchild2 =  $(this).parents().find('input[type=checkbox][data-level="child"]:checked').length;

                //if checked child == 0 then we uncheck the parent
                if (countcheckedchild2 == 0)
                {                           
                $(this).closest('td').parent().children('td').first('td').children('input[type=checkbox][data-level="parent"]').prop('checked', false); 
                }
            }



        }
});




//###########################  for subchild textfield  ########################### 
$('input[type=text][data-level="subchild"]').keyup(function(event) {
            var keyvalx = $(this).val();

                //if the value of the text area is not empty
            if (keyvalx != '') {
                // to check parent 
                $(this).closest('td').parent().children('td').first('td').children('input[type=checkbox][data-level="parent"]').prop('checked', true); 
                //to check child
                $(this).parents('li:last').children('input[type=checkbox][data-level="child"]').prop('checked', true);                     
            } else {
                $(this).parents('li:last').children('input[type=checkbox][data-level="child"]').prop('checked', false); 

                // to count how many child selected  
                var countcheckedchild3 =  $(this).parents().find('input[type=checkbox][data-level="child"]:checked').length;

                //if checked child == 0 then we uncheck the parent
                if (countcheckedchild3 == 0)
                {                           
                $(this).closest('td').parent().children('td').first('td').children('input[type=checkbox][data-level="parent"]').prop('checked', false); 
                }
            }
});

希望它可以帮助任何需要它的人。

Answer 3

        <script>  

            var checkParent  = function(ref) {
                return $(ref).parent().parent().parent().children().first();

            }

           $('input[type="checkbox"]').click(function(){
                if(this.checked){
                    $(this).parent().children().find('input[type="checkbox"]').attr('checked', true);
                }

                else {
                    var a = checkParent(this);
                    while(a.length > 0 && a.prop("tagName") == "INPUT" )
                     {
                        a.attr("checked", false);
                        a = checkParent(a);

                    }

                }
           });

        </script>  

刚刚为一个项目完成了这个算法，并认为我会在堆栈流上分享它

基本上，如果您选中一个父级，则所有子级都被选中，当您取消选中一个子级时，与其关联的所有父级都将被取消选中，因为只有当所有子级都被选中时，父级才能保持选中状态

确保所有复选框都在 li 内，并且所有 li 都在 ul 内，否则这将不起作用

示例 html

<ul id="a">
        <ul id="b">
            <li id="parentli"><input type="checkbox" id="parent"> Parent
                <ul id="c">
                     <li><input type="checkbox" id="aa">Child 1</li>
                     <li><input type="checkbox" id="ab">Child 2
                        <ul id="d">
                             <li><input type="checkbox" id="aba">Child 2-1</li>
                        </ul>
                     </li>
                     <li><input type="checkbox" id="ac">Child 3</li>
                </ul>
            </li>
        </ul>

   </ul>