selecting all checkboxes in javascript - with array of different values for checkbox

Question

JavaScript Code

function toggle(source) {

  console.log('here');
  checkboxes = document.getElementsByName('checkbox[]');

  for(var i=0, n=checkboxes.length;i<n;i++) {
       checkboxes[i].checked = source.checked;
    }
 }

PHP Code generating all checkboxes dynamically

    <td><input name="checkbox[<?php echo $row['id']?>]" type="checkbox" id="checkbox" value="<?php echo $row['id']; ?>"></td>

According to PHP code above All the name values are generated dynamically. Javascript code above is not able to select all the checkboxes

Please help!

---

After very long research finally found anser for my critical problem - Selecting & checking all the checkboxes with different name, value, id and same type.

function toggle (source) {
var checkboxes;
var len = document.frm1.elements.length;
var x = document.getElementById('all');

for(var i = 0 ; i< len;i++){

    if(document.frm1.elements[i].type == "checkbox")
        {

        checkboxes = document.frm1.elements[i];
        if(x.checked == true)
        {
            document.frm1.elements[i].checked = true;
        }
        else
        {
            document.frm1.elements[i].checked = false;
        }
           }

     /*if( isAllCheck == false ){
        document.frm1.elements[i].checked = "true";
        //alert( "it is false" );
    }else{ 
        document.frm1.elements[i].checked = "false";
        //alert( "it is true" );
    }
   isAllCheck = !isAllCheck; */


            }
     console.log(checkboxes);
     for(var i=0, n=checkboxes.length;i<n;i++) {

checkboxes[i].checked = source.checked;

       }

I hope this would help others...

Answer 1

var inputs = document.getElementsByTagName("input");
var checkboxes=[];
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == "checkbox") {
    checkboxes.push( inputs[i] ); 
}  
}

if you wish to check ALL of them, then you will have to add the line inputs[i].checked = true; inside the if condition

Tip: don't assign same ID for the checkboxes!!!

Answer 2

checked = false;
function ToggleAll(source) {
checkboxes = document.getElementsByName('course[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}

HTML:
<input type='checkbox' name='checkall' onclick='ToggleAll(this);'> Select All
<input type='checkbox' id = 'course' name='course[]'>Val1
<input type='checkbox' id = 'course' name='course[]'>Val2

Answer 3

This won't work this way, because none of your checkboxes has the name "checkbox[]". You could get all checkboxes by giving them a class and use the getElementsByClassName function. So the line where you get the checkboxes would look like this:

var checkboxes = document.getElementsByClassname('yourClassName');

And in the html you just assign the checkboxes the class 'yourClassName'.

Note that getElementsByClassname is not supported by some older browsers.

Answer 4

Your HTML is resulting in

<td><input name="checkbox[1]" type="checkbox" id="checkbox" value="1"></td>

which is not the same as

<td><input name="checkbox[]" type="checkbox" id="checkbox" value="1"></td>

To have PHP automatically select all checkbox you need to add

<td><input name="checkbox[]" type="checkbox" id="checkbox" value="1" checked></td>

Answer 5

With jQuery you should be able to do something like

checkboxes = $('input[name^="checkbox"]');

to get all input elements where the name starts with 'checkbox'

Answer 6

Assign class="toggle" to all the checkboxes which you want to toggle with the source.

var elemsToggle = document.getElementsByClassName("toggle");
  for(var i = 0; i < inputs.length; i++) {
    elemsToggle[i].checked = source.checked;
  }

This code will check or uncheck all the checkboxes having class="toggle" depending upon the state of your source checkbox.

Answer 7

You can use querySelectorAll

function toggle_checkbox(name) {
        checkboxes = document.querySelectorAll("input[name^='"+ name +"[']");

        for (var i = 0, n = checkboxes.length; i < n; i++) {
            checkboxes[i].checked = source.checked;
        }
}