Here I have written a javascript which selects all checkboxes on checking one checkbox and I want to display all the checked checkboxes value on button click. here it does selectall function correctly(ie. it selects all checkboxes). I am new to javascript and I need some help to display all the checked check box values, can any any one provide me the code to select all checkbox by clicking on a check box and display values of only selected checkboxes in a single function using javascript only...

Here is the javascript code

<script>
var checked=false;
function checkedAll ()
{
  var c =  document.getElementsByName("viju");
  checked = document.getElementById('causelist_month').checked;

 for (var i =0; i < c.length; i++)
 {
  c[i].checked=checked;
 }
}
</script>

Here the HTML code

 <input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll ();">select all/unselect all
 <input type="checkbox" name="viju" id="viju" value="Jan" onClick="">jan
 <input type="checkbox" name="viju" id ="viju" value="feb" onClick="">feb
 <input type="Button" value="Show values" onClick="checkedAll(this.value)"/>    

Here I have written a javascript which selects all checkboxes on checking one checkbox and I want to display all the checked checkboxes value on button click. here it does selectall function correctly(ie. it selects all checkboxes). I am new to javascript and I need some help to display all the checked check box values, can any any one provide me the code to select all checkbox by clicking on a check box and display values of only selected checkboxes in a single function using javascript only...

Here is the javascript code

<script>
var checked=false;
function checkedAll ()
{
  var c =  document.getElementsByName("viju");
  checked = document.getElementById('causelist_month').checked;

 for (var i =0; i < c.length; i++)
 {
  c[i].checked=checked;
 }
}
</script>

Here the HTML code

 <input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll ();">select all/unselect all
 <input type="checkbox" name="viju" id="viju" value="Jan" onClick="">jan
 <input type="checkbox" name="viju" id ="viju" value="feb" onClick="">feb
 <input type="Button" value="Show values" onClick="checkedAll(this.value)"/>    

• javascript
• checkbox

• you really should not be using the same ID for multiple elements within your HTML. I suggest you change your ID's to more meaningful ID's such as "jan" or "feb". – JosephGarrone Commented Mar 10, 2014 at 5:28
• Loop over the collection of checkboxes, if item[i].checked then it's checked so push the value into an array (or some other storage object). – RobG Commented Mar 10, 2014 at 5:30
• @Asryael—or remove the IDs pletely, they aren't necessary. – RobG Commented Mar 10, 2014 at 5:30
• @RobG that is correct, however I am unsure if he may or may not be using those ID's else where in the program. – JosephGarrone Commented Mar 10, 2014 at 5:31

4 Answers 4

Jsfiddle http://jsfiddle/2UFdc/

HTML

<form>
    <input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll ();">select all/unselect all
    <input type="checkbox" name="viju" id="viju" value="Jan" onClick="">jan
    <input type="checkbox" name="viju" id ="viju" value="feb" onClick="">feb
    <input type="Button" value="Show values" onClick="showVal(this.form)"/>  
</form>

Javascript

var checked = false;

function checkedAll() {
    var c = document.getElementsByName("viju");
    checked = document.getElementById('causelist_month').checked;

    for (var i = 0; i < c.length; i++) {
        c[i].checked = checked;
    }
}

function showVal(frm) {
    var arr = [];
    for (var i in frm.viju) {
        if (frm.viju[i].checked) {
            arr.push(frm.viju[i].value);
        }
    }
    alert(arr);
    return arr
}

First, use the event listener for the checkboxes rather than onClick:

document.getElementById("causelist_month").addEventListener('change', function(){
    checkboxes = document.getElementsByName("viju");
    for( var i=0; i<checkboxes.length; i++){
       checkboxes[i].checked = this.checked;
    }      
}, false);

And for the display of the checked items, in HTML:

<input type="Button" value="Show values" onClick="displayChecked()"/>
<div id="display"></div>

Then, in javascript:

function displayChecked (){
    var display = "";
    checkboxes = document.getElementsByName("viju");
    for( var i=0; i<checkboxes.length; i++){
        if( checkboxes[i].checked ){
            display += " " + checkboxes[i].value;
        }
    }
    document.getElementById("display").innerHTML = display;
}

you could use jquery functions dont forget to inclde jquery library

<button id="showall"> display </button> `
$("#showall").click(function() {

         var array = [];
             $(':checkbox:checked').each(function(i){
                  array[i] = $(this).val();
                 });

        $.each( array, function( i, val ) {
        $("#display").append(val); //the div where you want to display
         });

             });

`

<!DOCTYPE html>
<html>
<script>
var checked=false;
function checkedAll()
{
   var c = document.getElementsByName("viju");
   var checkboxesChecked = [];
  // loop over them all
  for (var i=0; i<c.length; i++) {
  // And stick the checked ones onto an array...
  if (c[i].checked) {
    checkboxesChecked.push(c[i]);
      }
 }

if(document.getElementById('causelist_month').checked)
{
    checked = document.getElementById('causelist_month');
    checkboxesChecked.push(checked);
}

  for (var j=0; j<checkboxesChecked.length; j++) {
      // iterate the pushed values
       alert(checkboxesChecked[j].value);
 }

}
</script>
<body>
<form>
<input type="checkbox" name="causelist_month" id="causelist_month" value="select all/unselect all" onclick="checkedAll     ();">select all/unselect all
 <input type="checkbox" name="viju" id="viju" value="Jan" onClick="">jan
 <input type="checkbox" name="viju" id ="viju" value="feb" onClick="">feb
 <input type="Button" value="Show values" onClick="checkedAll(this.value)"/>  
<form>
</body>
</html>

This displays all the list of check boxes in the alert message one by one. please check