jQuery Tutorial
jQuery Introduction
jQuery Data Types
jQuery Functions
jQuery Selectors
jQuery Attributes
jQuery Events
jQuery AJAX
jQuery class methods
jQuery css method
jQuery append method
jQuery appendTo method
jQuery prepend method
jQuery prependTo method
jQuery html method
jQuery text method
jQuery wrap method
jQuery wrapAll method
jQuery wrapInner method
jQuery unwrap method
jQuery hover
jQuery mouseenter
jQuery mouseout
jQuery toggle
jQuery show
jQuery hide
jQuery fadeOut
jQuery fadeIn
jQuery slideUp
jQuery slideDown
jQuery slideToggle
jQuery fadeTo
jQuery animate
jQuery slice method
jQuery Not Filter
jQuery length
jQuery contains
jQuery Tag Attribute
jQuery inArray
Getting and Parsing JSON
jQuery Draggable
jQuery Drag and Drop
jQuery Slider
jQuery Resizable
jQuery Date Calculations
How to debug jquery code?
jQuery trim
jQuery each
jQuery inArray method
jQuery extend method
jQuery Examples
jQuery Getting Selected Checkbox Values ?
Getting Selected HTML Checkbox Values in jQuery
This jQuery is used to get the selected checkbox list in the web page and finds the selected checkbox values and returns a comma separated list of values.
// gets the selected html rows checkbox's
function getSelectedCheckbox() {
var selectedCheckbox = [];
$('input[type=checkbox]').each(function () {
if ($(this).is(":checked")) {
selectedCheckbox.push($(this));
}
});
return selectedCheckbox;
}
// gets the selected checkbox values with comma separated list.
function getSelectedSubjects() {
var selectedSubjects = [];
var selectedCheckbox = getSelectedCheckbox();
for (var i = 0; i < selectedCheckbox.length; i++) {
selectedSubjects.push($(selectedCheckbox[i]).val());
}
alert(selectedSubjects.join(","));
}
Example jQuery code to get the selected HTML checkbox values
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Delete Row Dynamically</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function getSelectedCheckbox() {
var selectedCheckbox = [];
$('input[type=checkbox]').each(function () {
if ($(this).is(":checked")) {
selectedCheckbox.push($(this));
}
});
return selectedCheckbox;
}
function getSelectedSubjects() {
var selectedSubjects = [];
var selectedCheckbox = getSelectedCheckbox();
for (var i = 0; i < selectedCheckbox.length; i++) {
selectedSubjects.push($(selectedCheckbox[i]).val());
}
alert(selectedSubjects.join(","));
}
</script>
</head>
<body>
<table border="0">
<thead>
<tr>
<th>Interested Subjects</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="chkRow1" value="Maths" />Maths</td>
</tr>
<tr>
<td><input type="checkbox" id="chkRow2" value="Physics"/>Physics</td>
</tr>
<tr>
<td><input type="checkbox" id="chkRow3" value="Chemistry"/>Chemistry</td>
</tr>
<tr>
<td><input type="checkbox" id="chkRow4" value="Biology" />Biology</td>
</tr>
<tr>
<td><input type="checkbox" id="chkRow5" value="Accounts"/>Accounts</td>
</tr>
</tbody>
</table>
<button id="btnSelectedChoices" onclick="getSelectedSubjects();">Selected Choices</button>
</body>
</html>
Output:
Before selecting checkbox's
Once selected choices button is clicked
This jQuery is used to get the selected HTML checkbox values and displays the pop up message with checkbox values as comma separated values.
« Previous Next »
jQuery Programming Examples
Simple Filter HTML Table Rows in jquery
jQuery ui datepicker with disabled date ranges
jQuery ui datepicker change event to submit the form
Getting screen coordinates in jQuery
Getting mouse positions in jQuery
Getting pressed key code in jQuery
Getting multiple elements using tag, id and class in jQuery
Checking element tag in jQuery
Getting element by index in jQuery
Highlights the odd and even rows in different colors in jQuery
Simple Filter HTML Paragraph Tags in jquery
Enable / disable HTML input fields in jQuery
Remove leading and trailing space in text of HTML element using jQuery
jQuery Adding HTML Table Row Dynamically
jQuery Deleting HTML Table Row Dynamically
jQuery Deleting Selected Multiple HTML Table Rows
jQuery Getting Selected Checkbox Values
Update page title using jquery
print objects
jQuery Tutorial
2020 - All Rights Reserved. | 
