jquery function with parameters

Question

i have several checkboxes that when checked show a hidden div. Is there a way to write a jquery function that will show or hide based on whether the checkbox is checked the hidded div?

using just javascript

<input type="checkbox" name="box1" id="box1" onclick="function toggle('div1')">
<div id='div1'>
.....
</div>

<input type="checkbox" name="box2" id="box2" onclick="function toggle('div2')">
<div id='div2'>
.....
</div>


<script>
function toggle(id) {
if (this.checked) show(id);
else hide(id);
}

where show() and hide() are functions define to change the display attribue of the id.

Is there some way to do this in jquery where I bind the toggle to the checkbox adn have it toggle an id that is passed somehow?

Jacob Relkin · Accepted Answer · 2010-12-07 03:30:22Z

10

You can try creating a small jQuery plugin:

$.fn.toggleCheckboxContainer = function(selector) {
   var toggleObject = $(selector);
   return $(this).each(function() {
      $(this).change(function() {
        $(this).is(':checked') ? toggleObject.show() : toggleObject.hide();
      });
   });
};

$(function() {
    $('#box1').toggleCheckboxContainer('#div1');
    $('#box2').toggleCheckboxContainer('#div2');
});

jsFiddle example

edited Dec 7, 2010 at 3:30

answered Dec 7, 2010 at 3:23

Jacob Relkin

163k34 gold badges351 silver badges321 bronze badges

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

4 Comments

Alastair Pitts Over a year ago

+1, I like it! Much nice way that what I was going to write :)

sje397 Over a year ago

+1. But I would not prepend '#' and instead pass in a whole selector. That would make it more flexible.

Linda725 Over a year ago

would this work when the checkbox is checked or unchecked? Like an event handler?

Linda725 Over a year ago

great! thank you! I love the jsFiddle example thats what really did it for me.

Collectives™ on Stack Overflow

jquery function with parameters

1 Answer 1

jsFiddle example

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related