Question

大家好，我坚持使用一些希望得到帮助的代码。我的html设置如下：

     <div class="menu_options">
           <div class="parent_options">
               <input type="checkbox" class="parent_required" />
           </div>
           <div class="children">
                 <div class="child_options">
                      <input type="checkbox" class="child_required" />   
                 </div>
                 <div class="child_options">
                      <input type="checkbox" class="child_required" />   
                 </div>
                 <div class="child_options">
                      <input type="checkbox" class="child_required" />   
                 </div>
           </div>
      </div>

基本上我尝试做的是在jquery中，如果选中了parent_required类复选框，则获取子类下的所有输入字段，并通过child_required取消选中所有输入字段。

我不能在输入字段上使用id'，因为我只是不知道要使用的字段的所有id。

到目前为止在jquery中我有这个代码

      $('.parent_required').click(function() {

            if(!$(this).is(":checked")) {
                var child = $(this).parent('.parent_options').siblings('.children');

            }
        });

我在这里嘲笑div class ='儿童部分不知道如何深入了解。

Answer 1

试试这个：

$('.parent_required').click(function() {
    if (!$(this).is(":checked")) {
        $(this).closest('.parent_options')
            .siblings('.children')
            .find('.child_required')
            .prop('checked', false);
    }
});

Example fiddle

Answer 2

$('.parent_required').click(function() {

  if(!$(this).is(":checked")) {
    // this gives you the <div class="children">
    var child = $(this).closest('. menu_options').find('.children');
  }
});

Answer 3

对于parent_required：

，我会使用change代替click

$('.parent_required').change(function() {

    if (!$(this).is(":checked")) {
        $('.parent_required').parents('.menu_options').find('.child_required').prop('checked', false);
    }
});

Answer 4

如果您不知道id，只需使用输入的节点名称，类型属性或类，没有理由使用绝对DOM路径。

此外，您的parent调用只会返回<div class="parent_options">，但您需要<div class="menu_options">从那里选择子项：

$('.parent_required').click(function() {
    if (!this.checked)
        $(this)
          .closest('.menu_options')
          .find(':checkbox.child_required')
          .prop('checked', false);
});

Answer 5

检查一下：

    $('.parent_required').on('change', function() {

            if(!$(this).is(":checked")) {
               $(this).closest('.parent_options')
                      .next('.children').find('.child_required').attr('checked', false);
            }
        });

JSBin：http://jsbin.com/evoreq/1/edit

在这里，您可以使用父级复选框中的closest方法，直到您找到'parent_options'，然后您获取具有'children'类的'next'元素，找到里面的所有'child_required'元素它，并将checked属性设置为false。

jquery循环遍历输入字段并进入父节点和兄弟节点

5 个答案: