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

check generated html and paste it here , and one more thing by this code you will have duplicate ids in checkboxes , id="checkbox" is static. wich is illegal html — Rupesh Patel
– Rupesh Patel, Commented Aug 5, 2013 at 10:17

score 2 · Accepted Answer · 2013-08-05 10:32:47Z

2

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

edited Aug 5, 2013 at 10:32

answered Aug 5, 2013 at 10:23

user2587132

Sign up to request clarification or add additional context in comments.

Comments

SaranGokul · Accepted Answer · 2013-09-25 10:45:13Z

1

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

answered Sep 25, 2013 at 10:45

SaranGokul

111 bronze badge

Comments

Michael Kunst · Accepted Answer · 2013-08-05 10:17:00Z

0

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.

answered Aug 5, 2013 at 10:17

Michael Kunst

2,98828 silver badges40 bronze badges

2 Comments

Rohit Over a year ago

Thanks!!! Is there any other simple and universal solution , compatible with all browsers

Michael Kunst Over a year ago

You could set the name of all checkboxes to 'yourName', and then get them with document.getElementsByName('yourName');.

user2417483 · Accepted Answer · 2013-08-05 10:18:53Z

0

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>

answered Aug 5, 2013 at 10:18

user2417483

Comments

coolguy · Accepted Answer · 2013-08-05 10:49:30Z

0

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'

edited Aug 5, 2013 at 10:49

coolguy

7,9549 gold badges48 silver badges72 bronze badges

answered Aug 5, 2013 at 10:24

Graham Fowles

4591 gold badge4 silver badges12 bronze badges

1 Comment

Rohit Over a year ago

I am looking for Specifically JavaScript Solution!

sjv · Accepted Answer · 2013-08-05 11:05:02Z

0

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.

answered Aug 5, 2013 at 11:05

sjv

2052 silver badges6 bronze badges

Comments

Ramadhan · Accepted Answer · 2016-12-07 02:20:05Z

0

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

answered Dec 7, 2016 at 2:20

Ramadhan

8448 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related