How to select other checkbox when the last value is checked

Question

Here an example of my checkbox list http://jsfiddle.net/YnM2f/

Let's say I check on G then A,B,C,D,E,F also automatic checked. How can i achieve my goals with jQuery?

So you want all of the checkboxes to be checked when you check one of them? — , Jan 09 '12 at 15:04
Or do you want all of the checkboxes above the one you checked to get checked? — EvilAmarant7x, Jan 09 '12 at 15:05
Shameless self-promotion, only 20 months late: [jQuery CheckAll, a plugin I wrote](http://mjball.github.io/jQuery-CheckAll/). — Matt Ball, Aug 31 '13 at 03:45

score 4 · Answer 1 · answered Jan 09 '12 at 15:14

First you need to get all the checkboxes based on which one is clicked. for this you need to get the parent nodes, siblings that are before it. Here is some code that will help you get there, but you'll need to work on it to make it work for you.

http://jsfiddle.net/urau8/

$("input:checkbox").on("click",function(){
    if(this.checked)
    $(this).parent().prevAll().each(function(){
        $("input:checkbox",this).attr("checked",true);
    });
});

score 3 · Answer 2 · answered Jan 09 '12 at 15:14

3

$('input:checkbox').change(function(){
     var $allParents = $(this).parent();
     $allParents.prevAll().find('input').attr('checked', 'checked');
     $allParents.nextAll().find('input').removeAttr('checked');
});

Try this

answered Jan 09 '12 at 15:14

Fernando Pereira

31
2

score 3 · Accepted Answer · answered Jan 09 '12 at 15:15

This will check all checkboxes above a checkboxe that gets checked and uncheck all checkboxes above a checkbox that gets unchecked, given the checkbox layout that you've provided.

$('input:checkbox').click(function () {
    var state = $(this).prop('checked');
    var elements;
    if (state) {
        elements = $(this).parent().prevAll();
    } else {
        elements = $(this).parent().nextAll();
    }
    elements.each(function () {
        $('input:checkbox', this).prop('checked',state);
    });
});

score 2 · Answer 4 · answered Jan 09 '12 at 15:18

2

Well it's already been done five times, but this is what I did: http://jsfiddle.net/YnM2f/27/

$('input').click(function(){
    if( $(this).is(':checked') ){
      $(this).parent('p').prevAll().children('input').attr('checked',true)

         }
})

answered Jan 09 '12 at 15:18

daveyfaherty

4,585
2
27
42

score 1 · Answer 5 · answered Jan 09 '12 at 15:15

Try something like this: http://jsfiddle.net/YnM2f/16/

It's a very specific solution (as in it will only work with "G"), but it should give you an idea for how to customize this code to meet your needs.

$('input:checkbox').filter(function(){
    return (/ G/).test($(this).parent().text())
}).on('change', function() {
    var gBox = $(this);
    $('input:checkbox').prop('checked', $(gBox).prop('checked'));
});

How to select other checkbox when the last value is checked

5 Answers5