使用JQuery检查父列表项中的复选框？ [英] Use JQuery to check a checkbox in a parent list-item?

问题描述

我是全新的Javascript和JQuery，所以我一直在阅读它，我试图检查（和设置非活动）父列表项中的一个复选框，当其中一个孩子被选中。 p>

如果这没有任何意义，请查看列表结构。

 < ul> 
< li>< input type =checkboxname =items []value =88712003id =88712003/>父级1< / li> 
< li>< input type =checkboxname =items []value =88712003id =88712003/>父级2 
< ul> 
< li>< input type =checkboxname =items []value =21312341id =21312341/>儿童1  
< li>< input type =checkboxname =items []value =21312341id =21312341/>儿童2< / li> 
< / ul> 
< / li> 
< li>< input type =checkboxname =items []value =88712003id =88712003/>家长3< / li> 
< li>< input type =checkboxname =items []value =88712003id =88712003/>父级4< / li> 
< / ul> 
  

如果选择了子项1或子项2，我想要检查和设置父项2中的输入非活动。我已经开始工作了，但是卡在这里：

  $（function（）{
 $ .child'）。click（function（）{
 $（this）.parent（）。parent（）。parent（）。toggle（）; 
}）; 
}）; 
  

正如你所看到的，我没有做得太远。任何帮助将不胜感激。

谢谢！

解决方案

：

 < script type =text / javascript> 
 $（function（）{
 $（'li ul input [type = checkbox]'）click（function（）{
 var that = $（this）; 
 var parentUL = that.parent（）。parent（）; 
 var parentChk = parentUL.parent（）。find（input：first）; 
 var oneChecked = false; 
 parentUL。 find（input）。each（function（）{oneChecked = oneChecked || this.checked;}）; 
 console.log（oneChecked）; 
 parentChk.attr（checked，oneChecked） ; 
}）; 
}）; 
< / script> 
  

I'm brand new to Javascript and JQuery, so I've been reading up on it and am trying to check (and set inactive) a checkbox in a parent list-item when one of the children are checked.

If this doesn't make any sense, take a look at the list structure.

<ul>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 1</li>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 2
        <ul>
            <li><input type="checkbox" name="items[]" value="21312341" id="21312341" /> Child 1</li>
            <li><input type="checkbox" name="items[]" value="21312341" id="21312341" /> Child 2</li>
        </ul>
    </li>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 3</li>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 4</li>
</ul>

If Child 1 or Child 2 is checked, I want the input in Parent 2 to be checked and set inactive. I've started working on it, but got stuck here:

$(function(){
    $('.child').click(function() {
        $(this).parent().parent().parent().toggle();
    });
});

As you can see, I didn't make it far. Any help would be appreciated.

Thanks!

解决方案

Try this:

<script type="text/javascript">
$(function(){
    $('li ul input[type=checkbox]').click(function() {
                var that = $(this);
                var parentUL = that.parent().parent();
        var parentChk = parentUL.parent().find("input:first");
                var oneChecked = false;
                parentUL.find("input").each(function(){oneChecked = oneChecked || this.checked;});
                console.log(oneChecked);
                parentChk.attr("checked", oneChecked);
    });
});
</script>

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