views:

93

answers:

2

I have a form of checkboxes, that is dynamically generated based on the users content. Sections of checkboxes are broken up by categories, and each category has projects within. For database purposes, the category values have checkboxes, that are hidden. IF a category has sub items that have checkboxes that are checked, THEN the category checkbox is checked as well.

I have gotten this working ok using the JQuery .click(), but I can't figure out how to do it when the page loads.

Here is my code for when a checkbox is actually clicked:

$(".project").click(function() {

    if($(this).is(":checked") && $(this).hasClass("project")) {
       $(this).parent().parent().children(':first').attr('checked', true);

    }else if(!$(this).parent().children('.project').is(":checked")){
        $(this).parent().parent().children(':first').attr('checked', false);

    }
 });

Now when I am editing the status of these boxes (meaning after they have been saved to the db) the category boxes are not showing up as checked even though their children projects are checked. What can I do to make it so that my category box will be checked at load time if that category's child is checked?

Part of the problem I think is with the dynamically changing parent child setup, how can I find the parent box in order to have it checked? Thanks!

A: 

EDIT:

Let's say the parent elements have a unique class.

<div class="parent">
    <input type="checkbox" />
    <div>
        <input type="checkbox" class="project" checked="checked" />
    </div>
    <div>
        <input type="checkbox" class="project" />
    </div>
</div>

You could do something like this on page load:

$('.parent:has(.project:checked)').children(':first').attr('checked','checked');

This will return .parent elements that have at least one descendant that has class project and is checked.

Docs for the :has selector http://api.jquery.com/has-selector/


If you want to run the click handler when the page loads, you can trigger it manually.

$(".project").click(function() {

    if($(this).is(":checked") && $(this).hasClass("project")) {
       $(this).parent().parent().children(':first').attr('checked', true);

    }else if(!$(this).parent().children('.project').is(":checked")){
        $(this).parent().parent().children(':first').attr('checked', false);

    }
 });

$('.project').click();  // Triggers the click event handler 

This is shorthand for:

$('.project').trigger('click');  // Accomplishes the same as above
patrick dw
wow you copied my answer o.O
Ghommey
@Ghommey - Seriously? If so, nope.
patrick dw
Yes you did. Just read my code it says `.click()` .. you posted your answer 2 minutes later giving the same solution..
Ghommey
@Ghommey - Drop the paranoia. Yours definitely came in first. That just means that I was answering mine while you were submitting yours. When I started, there were no answers. It is not uncommon for two people to come up with the same solution (believe it or not). I have absolutely no need to copy your answer for an incredibly simple solution.
patrick dw
Firing the click event manually unchecks the children, and only checks the parent...producing a mildly desirable effect...any other thoughts?
Jeff
@Jeff - I see. Does the parent that you want to trigger have a class? If so, you could just grab them by class name and check them on page load. I'll update my answer.
patrick dw
try my second solution it does not trigger any click events
Ghommey
@Ghommey - Wait! Let me copy it first! ;o)
patrick dw
@Jeff - It would help to see your HTML structure. There's probably a good solution that won't involve more events firing than necessary.
patrick dw
A: 

I'd recommend using the live() method for binding your triggers, it's designed to apply binding to dynamically created elements.

Trafalmadorian