show element when checkbox is :checked in jquery

Question

So when i tick a checkbox i want an element to show and then hide when unchecked.

                <div class="hndle">
                    <table class="form-table">
                        <td class="left">
                            Environmental Findings
                        </td>
                        <td>
                            <input type="checkbox" class="check">
                        </td>
                    </table>
                </div>
                <div class="hndle">
                    <textarea></textarea>
                </div>
                <div class="hndle">
                    <table class="form-table">
                        <td class="left">
                            Recommendations
                        </td>
                        <td>
                            <input type="checkbox" class="check">
                        </td>
                    </table>
                </div>
                <div class="hndle">
                    <textarea></textarea>
                </div>

Okay so when the checkbox is clicked i want it to show the next div with the class hndle.(the one which has a textarea inside).

This is the jQuery code i have attempted with but no luck getting it working.

        $('.check').change(function(){
            if($(this).is(':checked')){
                $(this).parents('hndle').next().show();
            }else{
                $(this).parents('hndle').next().hide();
            }
        });

sorry i have actually got the . in my code i must have written it wrong — Matthew Smart
– Matthew Smart, Commented Jul 6, 2015 at 11:28

Arun P Johny · Accepted Answer · 2015-07-06 11:28:26Z

1

hndle is a class of the target ancestor element, so use class selector

$('.check').change(function() {
  $(this).closest('.hndle').next().toggle(this.checked);
});

$('.check').closest('.hndle').next().hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hndle">
  <table class="form-table">
    <td class="left">
      Environmental Findings
    </td>
    <td>
      <input type="checkbox" class="check" />
    </td>
  </table>
</div>
<div class="hndle">
  <textarea></textarea>
</div>
<div class="hndle">
  <table class="form-table">
    <td class="left">
      Recommendations
    </td>
    <td>
      <input type="checkbox" class="check" />
    </td>
  </table>
</div>
<div class="hndle">
  <textarea></textarea>
</div>

edited Jul 6, 2015 at 11:28

answered Jul 6, 2015 at 11:26

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matthew Smart Over a year ago

Actually this worked for me after changing all the $ to jQuery

Arun P Johny Over a year ago

@MatthewSmart you can use the dom ready handler like jsfiddle.net/arunpjohny/LqrwkceL/2 to use $

Milind Anantwar · Accepted Answer · 2015-07-06 11:30:18Z

1

You have incorrect selector to target next handle div element. hndle is classname of div.Thus you need to use class selector . with it:

$('.check').change(function(){
    $(this).closest('.hndle').next().toggle(this.checked);
}).change(); // trigger event to hide on load

Working Demo

edited Jul 6, 2015 at 11:30

answered Jul 6, 2015 at 11:25

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

1 Comment

Milind Anantwar Over a year ago

@MatthewSmart: check the fiddle

Collectives™ on Stack Overflow

show element when checkbox is :checked in jquery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related