CODEWITHSUNDEEP
javascriptjqueryhtml
TheCarver
TheCarver

Reputation: 19713

JS / JQuery - Check All Checkboxes

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...

Upvotes: 0

Views: 464

Answers (8)

captainhero70
captainhero70

Reputation: 694

// 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.

Upvotes: 0

user979794
user979794

Reputation: 23

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"));
});

Upvotes: 1

Mark Knol
Mark Knol

Reputation: 10163

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);
    }
}

Upvotes: 0

Maverick
Maverick

Reputation: 3059

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

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

Upvotes: 1

Jayantha Lal Sirisena
Jayantha Lal Sirisena

Reputation: 21366

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);

}

Upvotes: 2

Gabe
Gabe

Reputation: 50493

I would use:

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

Upvotes: 0

Samich
Samich

Reputation: 30115

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/

Upvotes: 0

japrescott
japrescott

Reputation: 5015

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.

Upvotes: 0

Related Questions