In this page it is presented a JavaScript function that can be used to get the values of the selected (checked) checkboxes added into a form. The function receives the object with that form, then, returns an Array with the value of each selected /checked checkbox into that <form>

Code of the function

// Returns an array with values of the selected (checked) checkboxes in 'frm'
function getSelectedChbox(frm){
 // JavaScript & jQuery Course - https://coursesweb.net/javascript
 var selchbox =[]; // array that will store the value of selected checkboxes

 // gets all the input tags in frm, and their number
 var inpfields = frm.getElementsByTagName('input');

 // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
 for(var i=0; i<inpfields.length; i++) {
 if(inpfields[i].type =='checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
 }

 return selchbox;
}

Example usage getSelectedChbox() function. When click on a button into a form with various checkboxes, it opens an alert window with the values of the selected checkboxes.
<h4>Example getting value of the selected checkboxes</h4>
<p>Select some checkboxes, then click the Click button.</p>

Check the web site programming language you know:
<form action='script.php' method='post'>
<input type='checkbox' name='chb[]' value='html' />HTML<br>
<input type='checkbox' name='chb[]' value='css' />CSS<br>
<input type='checkbox' name='chb[]' value='javascript' />JavaScript<br>
<input type='checkbox' name='chb[]' value='php' />php<br>
<input type='checkbox' name='chb[]' value='python' />Python<br>
<input type='checkbox' name='chb[]' value='net' />Net<br>
<input type='button' value='Click' id='btntest' />
</form>

<script>
// Returns an array with values of the selected (checked) checkboxes in 'frm'
function getSelectedChbox(frm){
 // JavaScript & jQuery Course - https://coursesweb.net/javascript
 var selchbox = []; // array that will store the value of selected checkboxes

 // gets all the input tags in frm, and their number
 var inpfields = frm.getElementsByTagName('input');

 // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
 for(var i=0; i<inpfields.length; i++){
 if(inpfields[i].type =='checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
 }

 return selchbox;
}

 /* Test this function */
// When click on #btntest, alert the selected values
document.getElementById('btntest').onclick = function(){
 var selchb = getSelectedChbox(this.form); // gets the array returned by getSelectedChbox()
 alert(selchb);
}
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which meta tag provides a short description of the page?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 characters that describes the content of the page" />
Which CSS property is used to stop the wrapping effect of the "float"?
clear text-align position
#some_id {
  clear: both;
}
Click on the method which gets an array with all the elements in the document that have a specified tag name.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicate the PHP function which returns the number of elements in array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Get the value of the selected /checked checkboxes in a form

Last accessed pages

  1. XMLHttpRequest object (3553)
  2. AJAX Course, free Lessons (7723)
  3. List with JavaScript events (216)
  4. CSS3 transition (1487)
  5. Get search data from URL address in JavaScript (2396)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1391)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1361)
  3. Contact page - CoursesWeb (1342)
  4. Tabs effect with CSS (1342)
  5. Insert, Select and Update NULL value in MySQL (843)