1

大家好，我坚持一些代码，希望能得到帮助。我的 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>

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

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

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

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

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

            }
        });

我在 div class='children 部分很烂，不知道如何深入。

4

5 回答 5

3

试试这个：

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

示例小提琴

于 2012-12-17T17:17:57.990 回答
1 
$('.parent_required').click(function() {

  if(!$(this).is(":checked")) {
    // this gives you the <div class="children">
    var child = $(this).closest('. menu_options').find('.children');
  }
});
于 2012-12-17T17:19:23.357 回答
1

我会使用change而不是clickparent_required：

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

    if (!$(this).is(":checked")) {
        $('.parent_required').parents('.menu_options').find('.child_required').prop('checked', false);
    }
});
于 2012-12-17T17:20:12.633 回答
1

如果您不知道 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);
});
于 2012-12-17T17:23:03.350 回答
0

检查这个：

    $('.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”元素，并将选中的属性设置为错误的。

于 2012-12-17T17:22:48.247 回答