选择符合条件的'子女'

我想选择所有点击儿童的复选框。例如，在下面的代码片段中，我希望它选择第一个“is-wine”，但不是第二个。目前，它也不选择。选择符合条件的'子女'

任何想法如何得到这个工作？

THX

<script> 
    $(document).ready(function() { 

     $('.click-me').on('click',function(){ 

      console.log('about to set'); 
      console.log('here is val: ' + $('.chex input.is-wine').attr('checked')); 

      if ($('.chex input.is-wine').children().is(':checked')) { 
       $('.chex input.is-wine').children().attr('checked',false); 
      } else { 
       $('.chex input.is-wine').children().attr('checked',status); 
      } 

      console.log('after setting'); 
     }); 

    }); 
</script> 

<body> 
    here i am withing sub 
    <div id='my-killer-id'> 
     <div class='click-me'>click me to start</div> 
     <div class='chex'> 
      <input type='checkbox' class='is-wine' /><br /> 
      <input type='checkbox' class='is-coffee' /><br /> 
     </div> 
    </div> 
    <div id='other-vals'> 
     <div class='chex'> 
      <input type='checkbox' class='is-wine' /><br /> 
      <input type='checkbox' class='is-coffee' /><br /> 
     </div> 
    </div> 
</body>

编辑＃1

因此，这里是我想要选择

<div id='my-killer-id'> 
    <div class='click-me'>clicke me to start</div> 
    <div class='chex'> 
    <!-- would select this --> 
    <input type='checkbox' class='is-wine' /><br /> 
    <input type='checkbox' class='is-coffee' /><br /> 
    <div class='other-things'> 
     <!-- would select this --> 
     <input type='checkbox' class='is-wine' /> 
     <input type='checkbox' class='is-coffee' /> 
     <div class='even-more-things'> 
     <!-- would select this --> 
     <input type='checkbox' class='is-wine' /> 
     <input type='checkbox' class='is-coffee' /> 
     </div> 
    </div> 
</div> 
</div> 
<div id='other-vals'> 
    <div class='chex'> 
    <!-- would not select this --> 
    <input type='checkbox' class='is-wine' /><br /> 
    <input type='checkbox' class='is-coffee' /><br /> 
</div> 
</div>

来源

2012-09-10 timpone

我也很困惑，你'.click-me'div没有任何子女 – kmb64

好吧，忽略孩子的概念。我想我问的是如何做到最好，在所选择的点上下降，忽略其他。 – timpone

你选择物品的方式很奇怪。

if ($('.chex input.is-wine').children().is(':checked')) { 
    $('.chex input.is-wine').children().attr('checked',false); 
} else { 
    $('.chex input.is-wine').children().attr('checked',status); 
}

这个..检查input.is-wine（其中有没有）所有的孩子，看看他们正在检查。然后，无论如何设置所有input.is-wine的属性。

你想检查每个人input.is-wine，然后检查是否是:checked。

像这样：

$('.chex input.is-wine').each(function() { 
    if ($(this).is(":checked")) { 
     $(this).removeAttr('checked'); 
    } else { 
     $(this).attr('checked','checked'); // I didn't see a `var status` so I just used 'checked' 
    } 
});

Here is a proof-of-concept jsFiddle。（我也改变了你的click-me到a而不是div的，为便于阅读的缘故，这种变化并不影响任何功能。）

注：此外，@JoãoSilva的回答表明，你这样做没有如果的好方法声明：

$('.chex input.is-wine').each(function() { 
    $(this).prop("checked", !$(this).prop("checked")); 
});

（如果你使用这个，给他一个给予好评！）

更新：你的编辑后，我注意到，你要选择的一样没有内的一切德。对于这一点，您可以使用...

$(this).parent().find('.chex input.is-wine').each(function() {

......或者......

$(this).siblings('.chex').find('input.is-wine').each(function() {

这些都将发现它们是在同一个DOM chex类的节点内的所有input.is-wine小号节点作为您的click-me对象。

来源

2012-09-10 23:30:32 Eric

thx，非常有帮助 - 将很快提出另一个问题 – timpone

试试下面的一个更现实的标记：

$('.click-me').on('click',function(){ 
    var $checkboxes = $(this).parent().find(".chex input.is-wine"); 
    $checkboxes.prop("checked", !$checkbox.prop("checked")); 
});

DEMO。

来源

2012-09-10 23:21:16

那么下一步将它限制在'下一个'容器中吗？这可能是我感兴趣的事情的多个层面。 – timpone

@timpone：然后你可以从'parent'搜索，这样你就可以找到你需要的输入，不管他们在层次结构中的什么位置。我已经添加了一个演示来根据您的新编辑来举例说明它。 –

选择符合条件的'子女'

回答

相关问题