4

I'm wondering if there is a way in jQuery to check/uncheck a checkbox when someone clicks an entire div layer. Like having a massive selection area, essentially.

Any ideas?

Here is an example... I am trying to make the around the checkbox clickable to toggle the individual checkbox, pretty much.

<fieldset>
    <div>
        <input type="checkbox" id="Checkbox1" />
    </div>
    Person 1<br />
</fieldset>
<fieldset>
    <div >
        <input type="checkbox" id="Checkbox2" />
    </div>
    Person 2<br />
</fieldset>
Improve this question
6
  • 2
    The obvious and most semantic way to do this is to use a label element instead of a div with the label's 'for' attribute set to the checkbox's id--no JavaScript necessary! The only caveat is that label is an inline element so it can't contain block elements. If you only want to put inline elements inside the div, use label instead. Otherwise eyazici's answer should work. Commented Dec 1, 2009 at 17:25
  • Do you want to check a single box when clicking several other things, or check many boxes when clicking a single thing? Commented Dec 1, 2009 at 17:28
  • Single checkbox clicking a single thing, repetitive. I want to make a list of cards, each one having a checkbox. The header of the card will be clickable and will 'check' it, essentially. Commented Dec 1, 2009 at 17:31
  • I have updated the question with a clearer example. I apologize for the lack of information. Commented Dec 1, 2009 at 17:34
  • you can make the label contain block level elements using CSS - if you put a span in the label and style it : display:block; Commented Dec 1, 2009 at 17:35

5 Answers 5

Reset to default
6

Perhaps use the clicked div as the parent. 

$(function() {
     $('#divId').toggle(
       function(event) {
         $(this).find('input').attr('checked', true);
       },
       function(event) {
         $(this).find('input').attr('checked', false);
       }
     );
 });

This should only check the boxes inside the #divId that's clicked.

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

2 Comments

Yes! I believe that did it! Can I bother for any information on what is going on here so I can understand it better?
It's the same as Aaron's response, but instead of a global $('input') ("find all inputs in the document"), I limit it to the div ("this") that was clicked ("find all inputs inside "the clicked div")
6 
$('fieldset div').bind('click', function() {
    var checkbox = $(this).find(':checkbox');

    checkbox.attr('checked', !checkbox.attr('checked'));
});
Improve this answer

1 Comment

This also worked. Thank you all so much! I'm learning more about jQuery with each new thing I get to try.
4

When you want to make this work both to click on the div and input inside it, and also trigger change function, you can use following code:

$('input').change(function() {
    console.log('change triggered')
}).click(function(event) {
    event.stopPropagation()
})

$('div').click(function() {
    var c = $this.find('input')
    c.attr('checked', (!c.is(':checked')).change()
})
Improve this answer

Comments

0

Your check all checkbox:

<input type="checkbox" id="checkAll" /> Check All

And your JS code:

  $('#checkAll').click(function() {
        if($(this).attr('checked')) {
            $('input:checkbox').attr('checked', false);
        } else {
            $('input:checkbox').attr('checked', true);
        }
    });
Improve this answer

2 Comments

Er, I don't think that does what I'm trying to do. I only want to check one box at a time if a larger layer around it is clicked. Not all of them. If I use that as an ID, I can only put it on one checkbox.
No, I'm sorry. This isn't what I'm trying to do.
0 
$(function() {
          $('#divId').toggle(
            function(event) {
              $('input[name=foo]').attr('checked', true);
            },
            function(event) {
              $('input[name=foo]').attr('checked', false);
            }
          );
      });
Improve this answer

1 Comment

This is close, but it still checks everything on the page. The contents are being generated from a database, and there are dozens on the same page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.