checkbox check all option

Question

I have checkbox set with Category Subcategorywise...

Company
    Microsoft
    Apple

 Country
     USA
     UK

and checkbox attached to each item. So if I click on checkbox next to Company, then it should automatically mark checkboxes next to Microsoft and Apple checked, like wise if I select Country, it should check the options USA and UK. and there should also be a select all option, which should select all of them.

Is it possible to add checkbox check property using javascript or jquery ?

<input type="checkbox" class="entityCheckboxHeader1" id="entityCheckboxHeader" name="Company">Company
 <input id="modalEntity" class="entity1" type="checkbox" name="CompanySub">Microsoft
 <input id="modalEntity" class="entity2" type="checkbox" name="CompanySub">Apple
 <input type="checkbox" class="entityCheckboxHeader2" id="entityCheckboxHeader" name="Country">Country
 <input id="modalEntity" class="entity3" type="checkbox" name="CountrySub">USA
 <input id="modalEntity" class="entity4" type="checkbox" name="CountrySub">UK

ids should be unique, your current html is invalid. Also for checkboxes use `name="group[]"`. — elclanrs, Jul 08 '12 at 04:00
@elclanrs - You don't need `[]` on repeated field names. I believe with _some_ server-side languages (PHP?) it lets the request param be treated as an array automatically, but for others (Java) it makes no difference at all. (Of course you are completely correct about `id`. I think the OP has his/her classes and ids backwards, since the classes shown _are_ unique.) — nnnnnn, Jul 08 '12 at 04:06
possible duplicate of [check/uncheck all checkboxes](http://stackoverflow.com/questions/7095039/check-uncheck-all-checkboxes) — bfavaretto, Jul 08 '12 at 04:07
@bfavaretto Its nt a duplicate of that thing...Im asking for id wise chec/uncheck ... I wanna know if a check box with two sets of ids in same page can be controlled.. If I use :check option in jqury it checks all the checkboxboxes — user1371896, Jul 08 '12 at 04:12
As @elclanrs said, it is not valid html to repeat ids. You seem to be using `id` and `class` the wrong way around: `id` is a unique identifier; `class` groups common things. You _can_ write code that will work with it as is, but it's easier if you start with valid and semantic markup. — nnnnnn, Jul 08 '12 at 04:18
I think I got that concept mixed up... so Ids can be different bt class should be unique... — user1371896, Jul 08 '12 at 04:28
No, each id _must_ be unique, that is, each element must have a different id (or no id). Any number of elements can have the same class. So in your html you'd give `class="entityCheckboxHeader"` to the two "top-level" checkboxes. (If you break the rule about unique ids the browser will still happily display your page, but it can cause some problems in your JS.) — nnnnnn, Jul 08 '12 at 04:32

Tats_innit · Accepted Answer · 2012-07-08T04:20:45.550

See simple demo here: http://jsfiddle.net/Pfmuq/2/ or simpler: http://jsfiddle.net/Pfmuq/3/

Please note id should always be unique at all times, rest when you will read the code I have noticed a pattern in your parent and Sub naming hence I took that under account.

please note I also took liberty to switch over your id and class anyhoo code is below :)

Rest hope this helps, :)

code

$('input[name="Company"],input[name="Country"]').click(function(){
    if ($(this).is(':checked')){
          $(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',true);

    } else {
          $(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',false);   
    }
});

code from 2nd demo

$('input[name="Company"],input[name="Country"]').click(function(){
          $(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',this.checked);
});

HTML

<input type="checkbox" class="entityCheckboxHeader1" id="entityCheckboxHeader" name="Company">Company
 <input class="modalEntityCompany" id="entity1" type="checkbox" name="CompanySub">Microsoft
 <input class="modalEntity" id="entity2" type="checkbox" name="CompanySub">Apple
<br /> 
<input type="checkbox" class="entityCheckboxHeader2" id="entityCheckboxHeader" name="Country">Country
 <input class="modalEntity" id="entity3" type="checkbox" name="CountrySub">USA
 <input class="modalEntity" id="entity4" type="checkbox" name="CountrySub">UK

Nice! I had no idea about `nextAll`, or about using `prop` on boolean attributes. A very tidy solution indeed. — andypaxo, Jul 08 '12 at 04:21
@Tats_innit I forgot abt the select all option which selects Country and Company which should select all options under them automatically.. — user1371896, Jul 08 '12 at 04:36

andypaxo · Answer 2 · 2012-07-08T04:33:29.627

0

If you can modify your HTML a little, you can come up with a general solution that will work with as many groups as you like (rather than just Country and Company).

HTML:

<input type="checkbox" class="entityCheckboxHeader" name="Company">Company
<input type="checkbox" name="CompanySub">Microsoft
<input type="checkbox" name="CompanySub">Apple
<input type="checkbox" class="entityCheckboxHeader" name="Country">Country
<input type="checkbox" name="CountrySub">USA
<input type="checkbox" name="CountrySub">UK

JavaScript:

$(function(){
    $('.entityCheckboxHeader').click(function() {
        $('[name="'+this.name+'Sub"]').prop('checked', this.checked);
    });
});

If you're not in a position to modify your HTML then the answer from Tats_innit is a nice, concise solution.

There's a JSFiddle of this solution here: http://jsfiddle.net/L5qqb/

edited Jul 08 '12 at 04:33

answered Jul 08 '12 at 04:19

andypaxo

6,171
3
38
53

I completely agree that modifying the current (invalid) html is the way to go, though you can still take the `name` of the clicked item and find its children by appending "sub". May I suggest that `this.checked` is more efficient and easier to read than `$(this).is(':checked')`? You can simplify to something like `$('[name="'+this.name+'Sub"]').prop("checked", this.checked)` – nnnnnn Jul 08 '12 at 04:20
@nnnnnn (hope that's the right number of n's). I agree with you about using the class names, I'll update my example. I don't know about `this.checked` and can't find it in the jQuery documentation. Do you have a link for that? – andypaxo Jul 08 '12 at 04:24
1

`this` is a reference to the DOM element that the click occurred on, so you can access that DOM element's properties directly. Saves having to call `$(this)` to create a new jQuery object and `.is()` or `.prop()` to check the property. As for `.checked`, it's a boolean property of checkbox and radio DOM elements. Other useful properties on input elements include `.value`, `.disabled`, etc. These are the underlying DOM element properties that jQuery updates when you use `.prop()`. – nnnnnn Jul 08 '12 at 04:26

d_inevitable · Answer 3 · 2012-07-08T04:48:48.000

First of all you should wrap your checkboxes with <label> so that when the label is clicked the checkbox is also toggled (user friendly).

Then i recommend using lists to group your checkboxes. (you can style them with css in any you want).

Something like this:

<ul>
    <li class="entityCheckboxHeader1" >
        <label><input type="checkbox" id="entityCheckboxHeader1">Company</label>
        <ul>
            <li><label><input id="modalEntity11" class="entity1" type="checkbox" name="company[]">Microsoft</label></li>
            <li><label><input id="modalEntity12" class="entity2" type="checkbox" name="company[]">Apple</label></li>
        </ul>
    </li>
    <li class="entityCheckboxHeader2">
        <label><input type="checkbox" id="entityCheckboxHeader2">Country</label>
        <ul>
            <li><label><input id="modalEntity21" class="entity3" type="checkbox" name="country[]">USA</label></li>
            <li><label><input id="modalEntity22" class="entity4" type="checkbox" name="country[]">UK</label></li>
        </ul>
    </li>
</ul>

Now you can use this very simply jquery to fullfill your task:

$("li :checkbox").change(function(){
    $(this).closest("li").find("ul :checkbox").prop("checked", $(this).is(":checked"));
});

http://jsfiddle.net/eKTAk/3/

Note that I have changed the names of the fields so that you can read them like this in php a script (post form):

$companies = $_POST['companies']; //Gets the array of values for the checked companies

$countries = $_POST['countries']; //Gets the array of values for the checked companies

I just gave an example for php as its very widely used. Im sure other languages support this too. — d_inevitable, Jul 08 '12 at 04:40
Anyway that was jsut one of the many suggestions I have made. You should consider my other suggestions, most importantly the `label` and the `
` and the jquery script. It makes much more neater that the answers posted here. — d_inevitable, Jul 08 '12 at 04:44

checkbox check all option

3 Answers3

Linked

Related