Turn this Javascript to jQuery equivalent

Question

Hi,

Can you help turn the following Javascript to jQuery equivalent?

// Let's use a lowercase function name to keep with JavaScript conventions
function selectAll(involker) {
    // Since ASP.NET checkboxes are really HTML input elements
    //  let's get all the inputs
    var inputElements = document.getElementsByTagName('input');

    for (var i = 0; i < inputElements.length; i++) {
        var myElement = inputElements[i];

        // Filter through the input types looking for checkboxes
        if (myElement.type === "checkbox") {

            // Use the involker (our calling element) as the reference 
            //  for our checkbox status
            myElement.checked = involker.checked;
        }
    }
}

It's from here http://wiki.asp.net/page.aspx/281/check-uncheck-checkboxes-in-gridview-using-javascript/

Answer 1

function selectAll(involker) {
    $('input:checkbox').attr('checked', $(involker).attr('checked'));
}

Answer 2

Just by:

function selectAll(involker) {
  $('input:checkbox').attr('checked', involker.checked);
}

Answer 3

$('input:checkbox').attr('checked', involker.checked);

Also it's "invoker" not "involker".

Answer 4

Let's make it jquery style!

$('type here the selector for invoker').click(function(){
    $('input:checkbox').attr('checked', $(this).attr('checked'));
});

Answer 5

Assuming the same HTML as the example, you'll want to remove the event attributes (i.e. OnClick="selectAll(this)") and use this unobtrusive Javascript:

$(document).ready( function() {
    $('#cbSelectAll').click( function() {
      $('input:checkbox').attr( 'checked', $(this).attr('checked') );
    });
});

Answer 6

My answer will be similar to others except to point out that using attr() is a really bad way to get or set the checkedness of a checkbox. It's longer, harder to read, slower and more error-prone, since it goes through all sorts of unnecessary jQuery function calls and falsely implies that it has something to do with attributes.

function selectAll(invoker) {
    var check = invoker.checked;
    $('input:checkbox').each( function() { this.checked = check; } );
}

Answer 7

Just to give a variety of options and add information for others.

To address replacement of your function: Set all the checkboxes to match the current checked status of involker:

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

OTHER:

Set all the checkboxes currently checked to match the current checked status of involker:

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

Set all the checkboxes NOT checked to match the current checked status of involker:

function selectAll(involker) 
{
    $("input:checkbox:not(:checked").attr("checked",involker.checked);
};

And to toss in another I have found useful with a "master checkbox/button clicker": toggle all of the checkboxes from current state

Set all the checkboxes to opposite of their current setting:(assumption of object with id='toggleCheckboxes' attribute)

$('#toggleCheckboxes').click(function()
{
    $("input:checkbox").each(function() {
        this.checked = !this.checked;
    });
});

Set all the checkboxes to match the current setting of master checkbox:(assumption of input checkbox object with id='masterCheckbox' attribute)

$('#masterCheckbox:checkbox').change(function()
{
    var master = this.checked;
    $(".childCheckbox input:checkbox").each(function() {
        this.checked = master;
    });
});