1

I have a HTML form with checkboxes as below,

when I select ALL, other check boxes {HR, FINANCE, IT, SALES} should get checked

When I un select ALL, other checkboxes {HR, FINANCE, IT, SALES} should get unchecked

When everything is checked and of one the checkboxes {HR, FINANCE, IT, SALES} is unchecked, ALL should be unchecked

Below is the markup of my HTML.... how can I so it using jQuery/javascript ????

<input type="checkbox" name="Dept" value="ALL"/>

<input type="checkbox" name="Dept" value="HR"/>

<input type="checkbox" name="Dept" value="FINANCE"/>

<input type="checkbox" name="Dept" value="IT"/>

<input type="checkbox" name="Dept" value="SALES"/>
Improve this question

4 Answers 4

Reset to default
1

Try this

jQuery > 1.6

// Cache the selectors as they are being multiple times
var $all = $('input[value=ALL]'),
    $inputs = $('input');

$all.change(function () {
    // Set the other inputs property to the all checkbox 
    $inputs.not(this).prop('checked', this.checked);
});

// Change event for all other inputs
$inputs.not($all).change(function () {
    var $others = $inputs.not($('input[value=ALL]'));

    // Get the checked checkboxes
    var $checked = $others.filter(function () {
        return this.checked;
    });
    // If length is not equal then uncheck the All checkbox
    if ($others.length !== $checked.length) {
        $all.prop('checked', false);
    }
});

jQuery 1.4.4 

var $all = $('input[value=ALL]'),
    $inputs = $('input');

$all.change(function () {
    var allChk = this;
    $inputs.each(function() {
        this.checked = allChk.checked;
    });
});

$inputs.not($('input[value=ALL]')).change(function () {

    var $others = $inputs.not($('input[value=ALL]'));

    var $checked = $others.filter(function () {
        return this.checked;
    });
    if ($others.length !== $checked.length) {
        $all[0].checked = false;
    }
});

jQuery > 1.6 Fiddle

jQuery 1.4.4 Fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

when I used the above code I am getting Microsoft JScript runtime error: Object doesn't support property or method 'on'
hii... my application is using jquery-1.5.2.min.js and jquery-ui-1.8.7.min.js, so unable to USE -- prop when tried with attr it's working for 1st check and uncheck ... later it's not working..
The problem with attr is that it does not give the correct state of the checkbox. That is the reason prop was added later to better capture the live state. Why don't you update your jQuery version
yeah it's recommended but in my company not insisted to change now as we have dependencies with other applications
@msbyuva.. Check updated code and fiddle.. Provided a way that works for 1.4.4 ..
1

Try this,

$("#selectall").click(function () {
      $('.case').attr('checked', this.checked);
});

where case is the class added to othe check boxes

For online demo visit,
http://viralpatel.net/blogs/multiple-checkbox-select-deselect-jquery-tutorial-example/

Improve this answer

Comments

1

DEMO

$('input[type="checkbox"][name="Dept"]').change(function () {
    if (this.value == 'ALL') {
        $('input[name="Dept"]').prop('checked', this.checked);
    }
});

Updated Demo with jQuery 1.5.2

$('input[type="checkbox"][name="Dept"][value="ALL"]').change(function () {
    $('input[name="Dept"]').attr('checked', this.checked);
});
$('input[type="checkbox"][name="Dept"]:gt(0)').change(function () {
    if (!this.checked) {
        $('input[name="Dept"][value="ALL"]').removeAttr('checked');
    }
    if ($('input[type="checkbox"][name="Dept"]:gt(0)').length == $('input[type="checkbox"][name="Dept"]:gt(0):checked').length) {
        $('input[type="checkbox"][name="Dept"][value="ALL"]').attr('checked',true);
    }
});
Improve this answer

2 Comments

Why say $(this).attr('value') when you can say $(this).val() or, arguably easiest to read but definitely most efficient this.value? (Especially when you're already using this.checked.)
hii... my application is using jquery-1.5.2.min.js and jquery-ui-1.8.7.min.js, so unable to USE -- prop when tried with attr it's working for 1st check and uncheck ... later it's not working.. sample provided by you is not un checking if unchecked one other check boxes-- 3rd case in my example
1

Here's one way to do it:

$(document).ready(function() {
    var $cbs = $('input[name="Dept"]').click(function() {
        if (this.value==="ALL")
            $cbs.prop("checked", this.checked);
        else if (!this.checked)
            $cbs[0].checked = false;
    });
});

Jawdroppingly good demo: http://jsfiddle.net/MNbDw/2/

Note that obviously my code above has a hardcoded assumption that the "ALL" checkbox will be the first one (at the point where I unchecked it using $cbs[0]). You could change the else if case to do this instead:

$cbs.filter('[value="ALL"]').prop("checked",false);

Demo: http://jsfiddle.net/MNbDw/3/

Or change your html to give that particular checkbox an id or whatever.

UPDATE: The .prop() method was introduced in jQuery 1.6. For version 1.5.2 (as mentioned in a comment) use .attr() instead as shown here (though 1.5.2 is so old that jsfiddle doesn't actually offer it as an option so I had to add it under "External Resources"): http://jsfiddle.net/MNbDw/9/

Improve this answer

4 Comments

I am getting error as Microsoft JScript runtime error: Object doesn't support property or method 'prop' ..application is not supporting 'prop'-- we are using jquery-1.5.2.min and jquery-ui-1.8.7.min.js
If you're using jQuery 1.5.2 use .attr() instead of .prop() - the latter was introduced in 1.6.
I know but when I use attr, it's not saving the state after intial check & uncheck... I am wondering is there any solution
What do you mean by "saving the state"?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.