Checkboxes with an option 'All' but in a different way

I have a list of checkboxes and one of them says "All", but the difference here is that I don't need to select all checkboxes when the "All" checkbox is selected, I actually need them to be deselected.

Sounds weird but that's how I need it.

Let me elaborate on what I need:

Ok, the list of checkboxes I mentioned. The "All" checkbox is selected by default, and it should be deselected once I check any of the other checkboxes (because the other checkboxes are actually specific subjects).

Here's the twist: If the user selects all the other checkboxes one by one... like if he's trying to select them all, then the moment they user clicks on the last checkbox to select it, it actually makes all the selected checkboxes deselected BUT the "All" checkbox gets selected.

Does that make sense?

Here's my starting HTML:

<label>
  <input type="checkbox" name="rb" value="all" id="all" checked>
  All</label>
<label>
  <input type="checkbox" name="rb" value="ln" id="ln">
  Option 1</label>
<label&g开发者_Python百科t;
  <input type="checkbox" name="rb" value="prodsandserv" id="prodsandserv">
  Option 2</label>
<label>
  <input type="checkbox" name="rb" value="publications" id="publications">
  Option 3</label>
<label>
  <input type="checkbox" name="rb" value="comm" id="comm">
  Option 4</label>

Here's a DEMO in case you'd like to work with it.

Any help it's greatly appreciated.

Thanks.

Use this code:

$('#all').change(function(){
    if ($('#all').attr('checked')) {
        $('input[type=checkbox][id!=all]').attr('checked', '');
    } else {
        $('input[type=checkbox][id!=all]').attr('checked', 'checked');
    }
});

Remember to add jQuery to your script:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>

try something like this.

I put the 'not all' checkboxes in a container div and then used

$('#container :checkbox').change(function() {
    if ($('#container :checkbox:not(:checked)').length > 0) {
        $('#all').attr('checked', false);
    }
    else {
        $('#all').attr('checked', true);
    } 
});

Which can be written more concisely (but a bit less readable) as

$('#container :checkbox').change(function() {
    $('#all').attr('checked', !$('#container :checkbox:not(:checked)').length);
});

First off, why complicate your question with the reverse logic on the "All" checkbox? Just call it "None" in your question and the change the label to "All" in your actual implementation.

Here are the components you'll need.

Add a class to your checkboxes. Not the None one. Let's call it "foo". <input type="checkbox" name="rb" value="ln" class="foo" id="ln">

Put a function in your jquery onload section that does the "none" action.

$("#none").click(function ()(source)
{
    i=($(source).attr("checked")) == "checked" ? "" : "checked";
    $(":checkbox.foo").attr("checked",i);
};

Put a function in your jquery onload section that sets the None box whenever another button is clicked

$(":checkbox.foo").click(function () 
{
    noneVal = "checked";
    $(":checkbox.foo").each(function (index) {
        if ($(this).attr("checked") == "checked")
        {
            noneVal = "";
            break;
        }
    })
    $('#none').attr("checked",noneVal);
});

Use following javascript for check all and check single checkbox

function checkall()
{
    for(intCounter=0; intCounter<(document.getElementsByName('chkBox').length); intCounter++)
    {
        document.getElementsByName("chkBox")[intCounter].checked = document.getElementById("chkAll").checked;
    }
}

function checkManual()
{
    var intCheckVal;
    intCheckVal = 1;
    for(intCounter=0; intCounter<(document.getElementsByName('chkBox').length); intCounter++)
    {
        if(document.getElementsByName("chkBox")[intCounter].checked == false)
            intCheckVal = 0;
    }
    if(intCheckVal == 1)
        document.getElementById("chkAll").checked = true;
    else
        document.getElementById("chkAll").checked = false;
}

Then on check all CheckBox onclick="checkall();" And on Check single Checkbox onclick="checkmanual();"

$("input").click(function() {

   var $this = $(this);
    if($this.is("[value=all]")) {
        var otherItems = $("input[type=checkbox][value!=all]");
        if ($this.is(":checked")) {
            otherItems.attr("checked", "").attr("disabled", "disabled")
        } else {
            otherItems.attr("disabled", ""); 
        }
    }

});

This works using your demo:

<script type="text/javascript">
    var allId = 'all';

    function getCheckboxes() {
        return document.getElementById('checkboxes').getElementsByTagName('input');
    }

    function clearCheckboxes() {    
        var checkboxes = getCheckboxes();
        for(var i=0; i<checkboxes.length; i++) {
            if (checkboxes[i].id != allId) {
                checkboxes[i].checked = false;
            }
        }
    }

    function setCheckboxes() {        
        var allCheckbox = document.getElementById(allId);
        var checkboxes = getCheckboxes();
        var allChecked = true;
        for(var i=0; i<checkboxes.length; i++) {
            if (checkboxes[i].id != allId) {
                if (!checkboxes[i].checked) {
                    allChecked = false;
                }
            }
        }
        if (!allChecked) {
            allCheckbox.checked = false;
        }
        else {
            allCheckbox.checked = true;
            clearCheckboxes();
        }
    }
</script>
<div id="checkboxes">
<label>
    <input onclick="clearCheckboxes();" type="checkbox" name="rb" value="all" id="all" checked>
    All</label>
<label>
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="ln" id="ln">
    Option 1</label>
<label>
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="prodsandserv" id="prodsandserv">
    Option 2</label>
<label>
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="publications" id="publications">
    Option 3</label>
<label>
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="comm" id="comm">
    Option 4</label>
</div>

Well, I came up with a hybrid answer between fearofawhackplane's and Marek's answers.

All the checkboxes are checked by default, and of course the 'All' is too. The 'All' checks/unchecks all checkboxes... I changed these two ideas from the initial plan I had, makes more sense, doh :).

fearofawhackplane's solution checks the 'All' checkbox when all other checkboxes get checked/unchecked one by one; and Marek's solution, checks/unchecks all checkboxes, although I made a small edit to his code.

This is the final jQuery script - Can this be shorten it out? o_O:

$('#container :checkbox').change(function() {
  $('#all').attr('checked', !$('#container :checkbox:not(:checked)').length);
});


$('#all').change(function() {
  if ($('#all').attr('checked')) {
    $('input[type=checkbox][id!=all]').attr('checked', 'checked');
  } else {
    $('input[type=checkbox][id!=all]').attr('checked', '');
  }
});

And the HTML is the one with the small modification proposed by fearofawhackplane too:

<label>
  <input type="checkbox" name="rb" value="all" id="all" checked>
All</label>
<div id="container">
  <label>
    <input type="checkbox" name="rb" value="ln" id="ln" checked>
    Option 1</label>
  <label>
    <input type="checkbox" name="rb" value="prodsandserv" id="prodsandserv" checked>
    Option 2</label>
  <label>
    <input type="checkbox" name="rb" value="publications" id="publications" checked>
    Option 3</label>
  <label>
    <input type="checkbox" name="rb" value="comm" id="comm" checked>
    Option 4</label>
</div>

Here's the DEMO of the final functionality.

Thanks to everyone.