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

Here's a fiddle

Answer 2

经过修改后我觉得这个版本很完美：http://jsfiddle.net/YDgHN/21/ 不要忘记在这里帮助我的其他人：

1）JQuery: uncheck subchild checkbox inside ul li

2）JQuery: Checkbox with 3 level auto select child or parent

<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>

JScode：

// ########################### 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>

JQuery：Checkbox如何在未选中父项时取消选中子项和子项

3 个答案:

Here's a fiddle