ansaurus

Question

checkboxes within the span, select deselect

Answer 1

+2 A:

Once you make the id to class change @patrick suggests above, you can do this:

$(".main_row :checkbox").change(function() {
  $(this).closest(".main_row").nextUntil(".main_row")
         .find(":checkbox").attr("checked", this.checked);
});

You can try a demo here, when you check/uncheck the checkbox in the .main_row, it goes up to the .main_row it's in, uses .nextUntil(".main_row") to get all the <span> elements between the clicked .main_row and the next, so this category. Then it gets any checkboxes in there and sets their checked property to the same as the checkbox in the .main_row you clicked on.

If there may be something besides .row in there, you can add a .filter(".row") after the .nextuntil() to restrict it to .row elements.

Nick Craver 2010-06-30 17:58:15

I think OP wanted the trigger to be on the `checkbox` under `.row`: *' when I select the checkbox in span "row"'*. So you'd need to backtrack to `.main_row` first. I still think the question implies nesting that doesn't exist. Your example really messed with my head until I looked at the CSS and realized you used `nextUntil()`. :o)

patrick dw 2010-06-30 18:11:36

Hi Nick Craver Thanks for that however, its working opposite. What I wanted was when I check the sub checkbox, then it should check the main check box and it there are no sub checkboxes checked, then the main checkbox should not be checked. Can you tell me how. Thanks again

2010-06-30 18:18:00

@user295189 - Do you mean like this? http://jsfiddle.net/rzwzF/2/ Still trying to grasp exactly what you're after :)

Nick Craver 2010-06-30 18:25:41

Nick Craver, yes almost! only thing is that its not letting me select if there are no sub-checkboxes. I still want to be able to select if there are no sub checkboxes. Thanks a millions

2010-06-30 18:28:23

@user295189 - In that case just remove the very first like that sets those to `disabled`, like this: http://jsfiddle.net/rzwzF/3/

Nick Craver 2010-06-30 18:36:36

@Nick Craver - if I do that then it will be a bug as the users can uncheck the top level but not the sub one, which is a problem. so if they unselect the top one can we unselect all the bottom ones too?thanks

2010-06-30 18:39:39

@user295189 - Combine the first and third demos, like this: http://jsfiddle.net/rzwzF/4/

Nick Craver 2010-06-30 19:11:28

Answer 2

+2 A:

Here's a solution that (I think) does what you want.

(Used Nick's example as a starting point. I see that Nick posted a similar solution, but this one takes a different approach. )

In addition to what you requested, if you click the checkbox under .main_row, it will check/uncheck all its related .row checkboxes.

Try it out: http://jsfiddle.net/nykda/

$(".row input").change(function() {
    var $row= $(this).closest(".row");
    var $main_row = $row.prev('.main_row').length ? $row.prev('.main_row') : $row.prevUntil(".main_row").prev();
    $main_row.find(":checkbox").attr("checked", function(i,attr) {
        return $main_row.nextUntil('.main_row').filter(':has(input:checked)').length ? "checked" : false;
    });
});

$(".main_row input").change(function() {
    $(this).closest(".main_row").nextUntil('.main_row').children(':checkbox').attr('checked', this.checked);
});

patrick dw 2010-06-30 18:41:54

+1 - Glad you resolved this, I'm knee-deep in figuring out why someone thought we needed `CookieCollection` *and* `CookieContainer` in .Net :-/

Nick Craver 2010-06-30 19:10:34

ansaurus

tags:

views:

answers:

checkboxes within the span, select deselect

related questions