CODEWITHSUNDEEP
jquery
timpone
timpone

Reputation: 19969

selecting the 'children' that match the criteria

I'd like to select all the checkboxes that are children of where I clicked. For example, in the snippet below, I'd like it to select the first 'is-wine' but not the second. Currently, it doesn't select either.

Any ideas of how to get this working?

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>

edit #1

So here is a more realistic markup of what I'm trying to select

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

Upvotes: 0

Views: 221

Answers (2)

Jo&#227;o Silva
Jo&#227;o Silva

Reputation: 91329

Try the following:

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

DEMO.

Upvotes: 1

Cat
Cat

Reputation: 67512

The way you're selecting items is weird.

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

This.. checks all children of input.is-wine (of which there are none) to see if they're checked. Then you set the attribute of all input.is-wines regardless of this.

You want to check each individual input.is-wine, then check if THAT is :checked.

Like so:

$('.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. (I also changed your click-me to an a instead of a div, for readability's sake. This change didn't affect any functionality.)

NB: Additionally, @JoãoSilva's answer shows you a good way of doing this without an if statement:

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

(If you use this, give him an upvote!)

Update: After your edit, I noticed that you want to select everything within the same node. For that, you can either use...

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

... or...

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

These will both find all input.is-wines within a node of class chex which are in the same DOM node as your click-me object.

Upvotes: 1

Related Questions