Multiple checkboxes toggle using jquery

Question

I have a list of check-boxes that I want their content toggled when checked. I have wrote it using jQuery but I would like somehow optimize my code in a way that I don't have to write a function for each check-box.

$(document).ready(function() {
  $("#purpose-1").click(function() {
    $("#purpose-detail-1").toggle(this.checked);
  }).triggerHandler('click');
  $("#purpose-2").click(function() {
    $("#purpose-detail-2").toggle(this.checked);
  }).triggerHandler('click');
  $("#purpose-3").click(function() {
    $("#purpose-detail-3").toggle(this.checked);
  }).triggerHandler('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="checkbox" id="purpose-1">Exhibition
    <ul id="purpose-detail-1">
      <li>
        <div>Title:</div>
        <div>
          <input type="text">
        </div>
      </li>
      <li>
        <div>Opening Date:</div>
        <div>
          <input type="text">
        </div>
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="purpose-2">Publication
    <ul id="purpose-detail-2">
      <li>
        <div>Title:</div>
        <div>
          <input type="text">
        </div>
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="purpose-3">Event
    <ul id="purpose-detail-3">
      <li>
        <div>Title:</div>
        <div>
          <input type="text">
        </div>
      </li>
      <li>
        <div>Event Date:</div>
        <div>
          <input type="text">
        </div>
      </li>
      <li>
        <div>Event Time:</div>
        <div>
          <input type="text">
        </div>
      </li>
    </ul>
  </li>
</ul>

Artur Filipiak · Accepted Answer · 2015-02-10 20:17:28Z

2

I would use classes and access ul's using next()

$(document).ready(function() {
  $(".my-ul").hide();
  $(".my-checkbox").click(function() {
    // in case the 'ul' is next to the checkbox:
    // $(this).next('ul').slideToggle(this.checked);
    // in case the 'ul' is in the same element but not next to the checkox:
    $(this).parents('li').find('ul').slideToggle(this.checked);
    // or maybe even better:
    // $(this).closest('li').find('ul').slideToggle(this.checked);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <p> <input type="checkbox" class="my-checkbox"><strong>Exhibition</strong> </p> <ul class="my-ul">
      <li>
        <div>Title:</div>
        <div>
          <input type="text">
        </div>
      </li>
      <li>
        <div>Opening Date:</div>
        <div>
          <input type="text">
        </div>
      </li>
    </ul>
  </li>
  <li>
    <input class="my-checkbox" type="checkbox" id="purpose-2">Publication
    <ul class="my-ul" id="purpose-detail-2">
      <li>
        <div>Title:</div>
        <div>
          <input type="text">
        </div>
      </li>
    </ul>
  </li>
  <li>
    <input class="my-checkbox" class="my-checkbox" type="checkbox" id="purpose-3">Event
    <ul class="my-ul" id="purpose-detail-3">
      <li>
        <div>Title:</div>
        <div>
          <input type="text">
        </div>
      </li>
      <li>
        <div>Event Date:</div>
        <div>
          <input type="text">
        </div>
      </li>
      <li>
        <div>Event Time:</div>
        <div>
          <input type="text">
        </div>
      </li>
    </ul>
  </li>
</ul>

edited Feb 10, 2015 at 20:17

answered Feb 10, 2015 at 19:44

Artur Filipiak

9,1874 gold badges33 silver badges56 bronze badges

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

2 Comments

Saeed Abbaspour Over a year ago

Thanks for your answer. I have another question, what if the 'ul' is not the next immediate element after 'input' ?

Artur Filipiak Over a year ago

If it's in the same element, you could use $(this).parent().find('ul') ... see updated answer

Alejandro Iván · Accepted Answer · 2015-02-10 19:49:05Z

1

Use a class:

<input type="checkbox" class="purpose-checkbox" id="purpose-1">Exhibition
<ul class="purpose-detail" id="purpose-detail-1">
    ...
</ul>

Then in jQuery:

$(".purpose").click(function() { // We choose elements with purpose class
    var $this = $(this); // The purpose checkbox clicked
    var purpose_detail = $(".purpose-detail", $this ); // Element with purpose-detail class inside the clicked checkbox
    purpose_detail.toggle( $this.prop("checked") );
});

edited Feb 10, 2015 at 19:49

answered Feb 10, 2015 at 19:43

Alejandro Iván

4,0611 gold badge23 silver badges31 bronze badges

Collectives™ on Stack Overflow

Multiple checkboxes toggle using jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related