JQuery bind click event to checkboxes

Question

Here's a basic view of what my html looks like:

<form>
  <div id="part1">
     // some html form elements including checkboxes
  </div>
  <div id="part2">
    // more html code with more checkboxes
  </div>
  <div id=part2">
     // data table with numerous checkboxes built dynamically
  </div
</form>

What I need to do is bind the .click() event to the checkboxes in part 1, 2, and 3 seperately. I've tried this $('#part1:checkbox').click(...) but that didn't work. If I use $("form :checkbox").click(...) same click event is bound to all checkboxes and not just one set. How would I seperate these?

Joseph Silber · Accepted Answer · 2012-06-27 23:15:05Z

24

You're almost there. You just need a space to separate the descendant selector:

$('#part1 :checkbox').click(function(){
    // code goes here
});

To increase performance, you might wanna use this:

$('#part1 input[type=checkbox]').click(function(){
    // code goes here
});

edited Jun 27, 2012 at 23:15

answered Jun 27, 2012 at 23:04

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

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

3 Comments

iJared Over a year ago

ugh.. the difference a space makes mahalos

Joseph Silber Over a year ago

@Jared - input[type=checkbox] is a valid CSS selector. When possible, jQuery will pass the selector along to querySelectorAll, which is far more efficient than jQuery's own implementation of :checkbox.

donstack Over a year ago

and how to get text of selected checkbox ?

Thomas Sebastian · Accepted Answer · 2014-09-08 10:53:21Z

1

Or you give same class name for all checkboxes and give the corresponding div ID for the checkbox also, so you can use the following code,

<input type="checkbox" class="checkall" id="part1">Part 1

and your script goes like this.

$('.checkall').click(function () {
if (this.checked == false) {
$("." + $(this).attr("id")).hide();
}
});

edited Sep 8, 2014 at 10:53

Thomas Sebastian

1,6125 gold badges21 silver badges40 bronze badges

answered May 19, 2014 at 6:59

user3512003

577 bronze badges

Comments

Craig London · Accepted Answer · 2017-12-13 15:01:55Z

1

I had a similar issue, and this StackOverflow page is the first answer I stumbled upon, but wasn't really satisfied with it. I found this article https://www.kevinleary.net/jquery-checkbox-checked/ with a better solution.

$('input[name="subscribe"]').on('click', function(){
    if ( $(this).is(':checked') ) {
        $('input[name="email"]').show();
    } 
    else {
        $('input[name="email"]').hide();
    }
});

answered Dec 13, 2017 at 15:01

Craig London

6741 gold badge9 silver badges14 bronze badges

Comments

Arash N · Accepted Answer · 2012-06-27 23:06:41Z

0

Use this:

$('#part1 input:checkbox').click(...)

http://api.jquery.com/checkbox-selector/

answered Jun 27, 2012 at 23:06

Arash N

3241 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

JQuery bind click event to checkboxes

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related