CODEWITHSUNDEEP
jquerycheckbox
Chris
Chris

Reputation: 1

Complex selection and checkboxes

I have a complex nested form, without individual classes (can´t change anything there...) and want to check all child checkboxes.

Because of the structure I´ve to do something like the following js:

$('.selector input').click(function(event) {
        if(this.checked) { 
            $(this).parents('.row').next('.checkboxselect').css( "background-color", "red" );
         }
        ...

That work fine so far, the area I need got the background color.

Now I need to check all checkboxes that can be found in .checkboxselect area, but have no clue how to do that... Maybe someone had an idea... Thx a lot! Best, Chris

Additional Infos: the form ist build like that (there are a fews blocks like that:

<div>
    <div class="row">
       <div>
          INPUT (WHEN THIS IS CHECKED, THE OTHERS SHOULD BE CHECKED TOO
       </div>
    </div>
    <div class="checkboxselect">
    <fieldset>
       <div class="fieldsetct">
          <div class="row">INPUT <- Check me, when the top checkbox is checked</div>
          <div class="row">INPUT <- Check me, when the top checkbox is checked</div>

       </div>     
    </fieldset>
  </div>
</div>

Upvotes: 0

Views: 34

Answers (2)

Chris
Chris

Reputation: 1

I've just edited my example, had an error there. What worked for me was something like that:

$(this).parents('.row').next('.checkboxselect').find('input').prop('checked', true);

Upvotes: 0

Steve0
Steve0

Reputation: 2253

Here is an example.

  1. Handle the change event of the parent checkboxes
  2. Find All Checkbox's in the same surrounding div.
  3. Set their state to the same as the checkbox that triggered the event.

$("#sample").on("change", function(e) {
  var $this = $(this);
  $this.closest(".checkboxselect").find(".fieldsetct>.row>input[type=checkbox]")
    .prop("checked", $this.is(":checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxselect">
  <div>
    <div class="row">
      <input type='checkbox' id='sample' />INPUT (WHEN THIS IS CHECKED, THE OTHERS SHOULD BE CHECKED TOO
    </div>
  </div>
  <fieldset>
    <div class="fieldsetct">
      <div class="row"><input type='checkbox' /></div>
      <div class="row"><input type='checkbox' /></div>

    </div>
  </fieldset>
</div>

Upvotes: 1

Related Questions