JS / JQuery - Check All Checkboxes

Question

I have a photo gallery. Underneath each photo is a checkbox, with the ID containing a prefix of 'checkbox_', followed by the photo ID.

<input type="checkbox" id="checkbox_<%=photoID%>" name="photos">

When I check a 'selectAll' checkbox, like this one:

<input type="checkbox" id="toggleAll" name="toggleAll" onclick="toggleAll()">

I want to check/uncheck all checkboxes that have the name 'photos', so I have this function that should do that... but it doesn't:

function toggleAll() {
if (document.getElementById('toggleAll').checked == true)
        {
        $('.photoBlob').animate({backgroundColor: 'rgba(0,102,204,0.5)'}, 500);
        $('.photoBlob').animate({backgroundColor: 'rgba(204,204,204,1)'}, 1500);
        document.getElementByName('photos').checked = true;
        }
else
        {
        $('.photoBlob').animate({backgroundColor: 'rgba(0,0,0,0)'}, 1000);
        document.getElementByName('photos').checked = false;
        }
}

The rest of the function works okay, it animates the background colors of the containing DIV (#photoBlob) when the toggleALL() function is called. But, I really can't get all the checkboxes to check and I have tried so many different variations!

Can anybody see what I am doing wrong? The problem lies with these two lines:

document.getElementByName('photos').checked = true;
document.getElementByName('photos').checked = false;

Any suggestions gratefully received...

Answer 1

You can do like this, don't use same name for several check boxes because the name shroud be unique. Instead of use the class.

<input type="checkbox" id="checkbox_<%=photoID%>" class="photos">

an the jquery,

$('#toggleAll').click(function(){
    var checked =$(this).attr('checked');
    $('.photos').attr('checked', checked);

}

Answer 2

$('#toggleAll').click(function(){
    $(':checkbox[name="photos"]').prop('checked',this.checked);
});

Fiddle demo: http://jsfiddle.net/uNeX2/

Answer 3

I think you're missing an "s" in getElementByTagName. Try getElementsByTagName .

This might also work:

$("#toggleAll").click(function() {<br/>
    $("input[name='photos']").attr("checked",!!$(this).attr("checked"));
});

Answer 4

// jquery check all or uncheck all

$('.checkall').click(function(){    

  var status = 'false';

  status = $('.checkall').is(":checked");

  //alert ('status is ' + status);  // you should see true or false     

  $('.metacheckbox').each( function() {

   $(this).attr('checked', status);

  });

});


<input class="checkall" type="checkbox" />Check/UnCheck All

<input class="metacheckbox" type="checkbox" id='checkboxone' name="checkboxone" value="Y" /> 

<input class="metacheckbox" type="checkbox" id='checkboxtwo' name="checkboxtwo" value="Y" /> 

<input class="metacheckbox" type="checkbox" id='checkboxthree' name="checkboxthree" value="Y" /> 

this worked for me.

Answer 5

well, since you said, you have multiple checkboxes with the name 'photos', selecting only one element by using the function getElementByName, can't be ur choice of game. Using jQuery simplifies the task your trying to do;

$("input[name=photos]").each(function(elem){
    elem.checked=true;
}

or simpler;

$("input[name=photos]").attr('checked','checked');

its its js-only, youd need to select all input elements via getElementsByTagName and then filter out the ones that don't comply with having a name of 'photos'.. and then do your task.

Answer 6

Here is simple example using jQuery:

html

<input type="checkbox" id="all" >
<input type="checkbox" name="photo" >
<input type="checkbox" name="photo" >
<input type="checkbox" name="photo" >
<input type="checkbox" name="photo" >

js

$('#all').click(function() {
    if ($(this).attr('checked') == undefined) {
        $('input[name=photo]').removeAttr('checked');        
    }
    else {
        $('input[name=photo]').attr('checked', 'checked');
    }
});

Code: http://jsfiddle.net/b8Y9t/3/

Answer 7

我会用：

$('.photos:checkbox').attr('checked','checked');

Answer 8

There is no function called getElementByName. Did you have a javascript-error? I think it should be getElementsByName . This returns a list with elements. That means you have to loop trough it to check all checkboxes.

BTW I think it is not correct to use a name called 'photos' for a checkbox, since a checkbox is a single object and does not display a photo itself. I would name it 'photoCheckbox' or 'cbPhoto' to clearify it is a checkbox.

var checkboxList = getElementsByName('photoCheckbox'); // returns list with checkboxes with name 'photoCheckbox'
if (checkboxList)
{
  for (var i = 0; i < checkboxList.length; i++)
  {
    var checkbox = checkboxList[i];
    checkbox.checked = false;
  }
} 

Thats how the getElementsByName function works. So if you would evaluate this method, you would say this is unnecessary since you are already using jQuery ? I would simplify the code of the checkbox:

<input type="checkbox" onclick="toggleAll(this)" />

The new toggleAll function looks like this:

 function toggleAll(checkbox)
 {
    if (checkbox.checked)
    {
       $('.photoBlob').animate({backgroundColor: 'rgba(0,102,204,0.5)'}, 500);
       $('.photoBlob').animate({backgroundColor: 'rgba(204,204,204,1)'}, 1500); // btw why 2 animations on the same elements..?

       $('input[name="photos"]').prop("checked", true);
    }
    else
    {
       $('.photoBlob').animate({backgroundColor: 'rgba(0,0,0,0)'}, 1000);

       $('input[name="photos"]').prop("checked", false);
    }
}