使用jquery检查多行checkboxtree中的所有父项

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..“指定id或名称。复选框"22..“复选框和"11..“复选框。

比如

<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网站查看checkbox的详细操作。

更新

对不起，我可能听不懂提问者的话。如果你想输出4000个盒子，我想你必须有一个程序来生成它。因为你不会通过输入生成4000个盒子。每个元素的ID或名称必须遵循生成规则，在很多时候可能会使用频率号，如box1，box2，box3...So你仍然使用上面的脚本。

如果您希望动态触发器遵循触发规则，例如，如果某个元素已被单击，请同时选中下两个框。然后你就可以使用

$('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)
            }
        })
    }
})