unknown checkbox problem

Ok, consider this problem. I have a list of email addresses and each email address has a checkbox which marks them as valid or not. OK, so the user can go and check/uncheck each one of the email addresses manually or he can开发者_开发百科 click on a button that selects or deselects all the checkboxes.

However, my problem is, when the user clicks on that button that selects/deselects all the checkboxes, how would the program know in what state all the checkboxes are? I mean:

if (all checkboxes are checked)
{  uncheck all}
else
{ check all }

I cannot just go and take the value of the first row, since: 1. User may have checked/unchecked it manually 2. That ID may no longer be present in the db.

Please help me.

I think you are looking at this the wrong way. I would suggest having a checkbox as your toggle (as sites/apps do). Then the state of the checkbox is dependant whether all other checkboxes are selected.

You could do it with variables / flags but this look intuitive to me. here is an example - code is a bit rushed :)

http://jsbin.com/uyapi4

Just look at the first row, and then apply the opposite state to all checkboxes.

If there is an ID no longer in the database, that is a separate issue that you handle with server-side code, either by ignoring it, or by throwing a validatione error back to the user.

The way this is worded it makes me think this is a usability question as opposed to a programming question. Take a look at gmail and the ui they use for toggling selected emails. There is basically a checkall box at the top of the list which grays in checked if an email is checked. If you click it then it toggles everything to unchecked and switches to unchecked itself. If you click again it selects all. I think this UI works well.

Not sure if its what your are looking for, hope it help.

// Will select all checkbox input not checked, and checked them.
$(".checkbox-class:not(:checked)").attr('checked', true);

No tested.

Not entirely sure whether you're asking a UX question or a technical question. So I'll answer both. :-)

From a UX perspective, FWIW (and this may be off-topic), usually with an "all" button that toggles between "all" and "none", this is the state map I use:

• all are checked => uncheck all
• none are checked => check all
• some are checked => check all

If you do that, this is really easy:

var cbs;

cbs = $(container).find('input[type=checkbox]');
cbs.attr('checked', cbs.not(':checked').length > 0);

Live example

...assuming all of these checkboxes are in some kind of container (e.g., a form or some div within the form, etc.).

If you want to do something else, you can still have jQuery to count the checked ones for you:

var cb, total, checked;
cb = $(container).find('input[type=checkbox]');
total = cb.length;
checked = cb.filter(':checked');
if (checked == total) {
    // They're all checked
}

you can use this assuming you have all the checkboxes named email[]

Add this to the head of the page or in the script file you have:

<script type="text/javascript">
function checkAll()
{
    checkBoxes = document.getElementsByName('email[]')
    for(i=0;i<checkBoxes.length;i++)
        if(!checkBoxes[i].checked)
            checkBoxes[i].checked = true
}

function uncheckAll()
{
    checkBoxes = document.getElementsByName('email[]')
    for(i=0;i<checkBoxes.length;i++)
        if(checkBoxes[i].checked)
            checkBoxes[i].checked = false
}
</script>

and this in the body of the page:

<a href="javascript:checkAll()">Check All</a> || <a href="javascript:uncheckAll()">Uncheck All</a>

or add it as a button but dont forget to use"javascript:checkAll()"and"javascript:uncheckAll()"`

or store the state in a variable and do something like this?: http://www.jsfiddle.net/EQuvq/12/

It sounds like you want two separate events: Select All and Deselect All. The most straightforward way to handle this is to have two separate buttons (or selections in a drop-down, whatever).

In this case, you'd want something like (in JavaScript using jQuery):

function selectAll() {
    $(":checkbox").attr("checked", true);
}

function deselectAll() {
    $(":checkbox").removeAttr("checked");
}

It's within the current HTML spec that the "checked" attribute have no value, but. If you're unsure about this, you can always use .attr("checked", true) instead.

If, on the other hand, you're looking for a function that toggles the state of each checkbox, then...

function toggleChecked() {
    $(":checked").each(function() {
        var checkedState = $(this).attr("checked");
        $(this).attr("checked", !checkedState);
    });
}

If, finally, you're looking for a function that assigns a checked state to all checkboxes, then...

function setChecked(state) {
    $(":checked").attr("checked", state);
}