Loop through checkboxes with a class using jQuery

September 14, 2017 5:06 pm by ATS Staff

Following code shows how to loop through checkboxes with a given class using jQuery to get the values of checkboxes that are checked.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function showCheckboxValues(x_class) {
	var str = '';
	jQuery("."+x_class+":checked").each(function(){
	  str += jQuery(this).attr("value") + ',';
	});
	str = str.substring(0, str.length - 1);
	return str;
}
</script>

<label><input type="checkbox" class="send_email" value="aaa@aaa.com" /> AAA </label><br />
<label><input type="checkbox" class="send_email" value="bbb@bbb.com" /> BBB </label><br />
<label><input type="checkbox" class="send_email" value="ccc@ccc.com" /> CCC </label><br /> 
<input type="button" value="Show Checked Values" onclick="alert(showCheckboxValues('send_email')); return false;" />