'Display value of checked check boxes javascript

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

Solution 1:^[1]

Jsfiddle http://jsfiddle.net/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
}

Solution 2:^[2]

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

Solution 3:^[3]

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

             });

Solution 4:^[4]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	SajithNair
Solution 2
Solution 3	reid
Solution 4

'Display value of checked check boxes javascript

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]