CODEWITHSUNDEEP
phpjavascript
Rohit
Rohit

Reputation: 357

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

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

Upvotes: 0

Views: 6916

Answers (7)

Ramadhan
Ramadhan

Reputation: 844

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

Upvotes: 0

SaranGokul
SaranGokul

Reputation: 11

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

Upvotes: 1

sjv
sjv

Reputation: 205

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.

Upvotes: 0

Graham Fowles
Graham Fowles

Reputation: 449

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'

Upvotes: 0

user2587132
user2587132

Reputation: 

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

Upvotes: 2

user2417483
user2417483

Reputation:

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>

Upvotes: 0

Michael Kunst
Michael Kunst

Reputation: 2988

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.

Upvotes: 0

Related Questions