使用jQuery检查多行复选框树中的所有父级

Question

我有菜单：

<ul>
    <li class="expanded">
        <span class="ui-icon">
        </span>
        <span class="ui-icon">
        </span>
        <label>
            <input type="checkbox" name="" value="45">
            111111111
        </label>
        <ul id="ch-content-menu" class="ui-widget-content">
            <li class="expanded">
                <span class="ui-icon ui-icon-triangle-1-se">
                </span>
                <label>
                    <input type="checkbox" name="" value="18">
                    22222222222222
                </label>
                <ul id="ch-content-menu" class="ui-widget-content">
                    <li class="leaf">
                        <span>
                        </span>
                        <label>
                            <input type="checkbox" name="" value="19">
                            33333333333333
                        </label>
                    </li>
                    <li class="leaf">
                        <span>
                        </span>
                        <label>
                            <input type="checkbox" name="" value="20">
                            4444444444
                        </label>
                    </li>
                </ul>
            </li>
        </ul>
    </li>

</ul>

我想编写一个脚本，当我单击4444444复选框时，将自动检查2222222和1111111。

我怎么能用jQuery做到这一点？

Answer 1

您必须为“ 44 ..”复选框“ 22 ..”复选框和“ 11 ..”复选框指定ID或名称。

如

<input id="44" type="checkbox"/>
<input id="22" type="checkbox"/>
<input id="11" type="checkbox" />

之后，您可以使用脚本来监视那些元素的操作

$('#44').click(function(){
   $('#22').attr('checked',true);
   $('#11').attr('checked',true);
});

您可以访问jquery网站以查看复选框的详细操作。

更新

抱歉，我可能想念发问者。 如果要输出4000盒，我认为您必须有一个生成它的程序。 由于您不会通过键入生成4000个框。 每个元素的ID或名称必须遵循一个生成规则，在很多时候，它们可能使用频率编号，例如box1，box2，box3 ...因此您仍然像上面一样使用脚本。

如果要遵循触发规则的动态触发，例如说是否单击了一个元素，请同时选中下两个复选框。 那你可以用

$('input').click(function(){
  var check_index = $(this).index();
  var next1 = check_index+1;
  var next2 = check_index+2;
  $('input#box'+next1+',input#box'+next2).click()});

或者您可以创建映射对象以供选择

var mapping = {
  'box1':'#box4,#box5',
  'box44444':'#box222,#box111'
  ...
}
$('input').click(function(){
   $(mapping[this.id]).click();
});

当然，您需要有一个程序来生成此映射，该映射是通过遵循指定规则生成的。 但是，无论使用哪种方法，如果要使脚本具有稳定的性能，仍然需要为要使用的每个元素提供id或名称。

最好的方法是使用ID，如果不能使用，则可能需要使用get（），但是，由于get（）将jquery对象检索为普通DOM对象，因此，您需要再次用$（）将其包装起来。

var ul3 = $('ul').get(3) // get the last ul
var target = $(ul3).find('input').get(1) // get the 4444 input
$(target).click(function(){
  var ul1 = $('ul').get(0) // get the first ul
  var inputs = $(ul1).find('input') // get all input element under the first ul
  $($(inputs).get(0)).click(); // get and click the first input element
  $($(inputs).get(1)).click(); // get and click the second input element
})

希望对您有帮助。

Answer 2

最好的方法是将id属性添加到输入字段（如果输入字段很少），但是您也可以尝试以下jquery代码：

$('label').click(function(){
    text = $.trim($(this).text())
    if (text == '4444444') {
        $('label').each(function(){
            text = $.trim($(this).text())
            if (text == '2222222' || text == '1111111') {
                $(this).children().attr('checked', true)
            }
        })
    }
})