0

我想选择我单击的所有子复选框。例如，在下面的代码段中，我希望它选择第一个“is-wine”而不是第二个。目前，它也没有选择。

关于如何使它工作的任何想法？

谢谢

<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>
4

2 回答 2

1

尝试以下操作：

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

演示。

于 2012-09-10T23:21:16.587 回答
1

您选择项目的方式很奇怪。

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'
    }
});

这是一个概念验证 jsFiddle。（为了便于阅读，我还将您的更改click-me为 aa而不是 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() {

这些都将在类的节点中找到与您的对象在同一个 DOM 节点中的所有input.is-wines 。chexclick-me

于 2012-09-10T23:30:32.587 回答