0

クリックした場所の子であるすべてのチェックボックスを選択したいと思います。たとえば、以下のスニペットでは、最初の「is-wine」を選択し、2 番目は選択しないようにします。現在、どちらも選択していません。

これを機能させる方法のアイデアはありますか?

どうも

<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

アイテムの選び方がおかしい。

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

これは概念実証の jsFiddleです。(また、読みやすくするために、 yourをa ではなくclick-meanに変更しました。この変更は、どの機能にも影響しませんでした。)adiv

NB: さらに、@ JoãoSilva の回答は、if ステートメントを使用せずにこれを行う良い方法を示しています。

$('.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 ノードにあるinput.is-wineクラスのノード内のすべての を検索します。chexclick-me

于 2012-09-10T23:30:32.587 に答える
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 に答える