Multiple selection with checkbox?

[Jasn]

Hello,
I have this html table and jquery code. http://jsfiddle.net/max33/b4zv8fec/ I can select and highlight items one by one. But what I would like to do is, select groups of items as you can see in the example with one click (one checkbox). There will be different groups of parameters (with different numbers of items). How can I solve the problem in the code to do what i want to do? and you think the checkbox is the best way to do this kind of group selection?

[Lokesh]

Not sure if i understand your question correctly but here is my solution to enable group select/de-select behavior on click of “Select All” checkbox.

function toggleCheckboxState(event){
    if($(this).is(':checked')){
        $("input:checkbox:not(:checked)",'#form1').prop("checked","checked")
    } else {
        $("input:checkbox(:checked)",'#form1').prop("checked","")   
    }   
}

$('.all','#form1').on('click', toggleCheckboxState);

Do let me know in case i misunderstood the actual ask of question

~ Lokesh

[Jasn]

Hi Lokesh,

I provide a picture here on this link. http://tinypic.com/r/30vbpkz/8, also http://jsfiddle.net/max33/b4zv8fec.

As you can see in the picture, there are two groups and “two select alls” for each group. When I click a select all for a particular group, I would like just these group items to be selected and highlighted on the table. (if possible, when I click second time on the select all, it would be great to have a deselect all property. I only put there two groups as an example but there will be more groups. Thank you for your reply, unfortunately, I couldn’t run the code you provided, It didn’t make any difference. I guess I did something wrong.

[Lokesh]

• You forgot to include “jQuery” library is the fiddle

For me, it is working as expected. Did few code changes in javascript, please compare with your fiddle to find out those changes.

Working JS fiddle -
http://jsfiddle.net/ylokesh/b4zv8fec/7/ or http://jsfiddle.net/ylokesh/7dp8f26f/

[Jasn]

Thanks a lot, Lokesh. I just tried it now and it is working. I have a question though. If I add more groups ( (3,4,5…200.) I need to create a different form for each group (form1, form2,form3 …)? and then will i need to make additions to the existing jquery code?

[Lokesh]

I think, you won’t need to make any changes in JavaScript. Just add more forms with unique ID’s/Names and it will work.

[Jasn]

Ok, I will start doing it now. Thanks again. Have a good day!