Question

我想选中所有我点击的子项的复选框。例如，在下面的代码段中，我希望它选择第一个'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>

Answer 1

尝试以下方法：

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

<强> DEMO

Answer 2

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

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 s的属性。

您想要检查每个人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的回答显示了一个没有if语句的好方法：

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

（如果你使用它，请给他一个upvote！）

更新：编辑后，我注意到您要选择同一节点中的所有内容。为此，你可以使用......

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

......或......

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

这些将在类input.is-wine的节点中找到所有chex，它们与click-me对象位于同一DOM节点中。

选择符合条件的“孩子”

2 个答案: