Microsoft Techies: Get selected checkbox using jquery

Thursday, 26 February 2015

Get selected checkbox using jquery

	<!DOCTYPE html>
	<html>
	<head>
	<title>jQuery With Example</title>
	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function () {
	$('#btnGetAllSelected').click( function(){
	var chkId = '';
	$('input:checkbox[name="Number"]:checked').each(function() {
	chkId += $(this).val() + ", "
	});
	chkId = chkId.slice(0,-2)// Remove ", " from end
	alert(chkId);
	});

	$('#btnLength').click( function(){
	alert("Checked: " + $('input:checkbox[name="Number"]:checked').length);
	alert("UnChecked: " + $('input:checkbox[name="Number"]:not(:checked)').length);
	});

	$('#btnValidation').click( function(){
	if($('input:checkbox[name="Number"]').is(':checked')) {
	alert("True")
	}
	else {
	alert("False")
	}
	});

	$('#chkSelectAll').click( function(){
	if ($(this).attr('checked') == undefined) {
	$('input:checkbox[name="Number"]').removeAttr('checked');
	}
	else {
	$('input:checkbox[name="Number"]').attr('checked', 'checked');
	}
	});

	});
	</script>
	</head>
	<body>
	<div>
	<input type="checkbox" name="Number" value="1" checked="checked">One</input><br />
	<input type="checkbox" name="Number" value="2">Two</input><br />
	<input type="checkbox" name="Number" value="3">Three</input><br />
	<input type="checkbox" name="Number" value="4" checked="checked">Four</input><br />
	<input type="checkbox" name="Number" value="5">Five</input><br /><br />
	</div>
	<input type="button" id="btnGetAllSelected" value="GetAllSelected" />
	<input type="button" id="btnLength" value="Length" />
	<input type="button" id="btnValidation" value="Validation" />
	<input type="checkbox" id="chkSelectAll">SelectAll</input>
	</body>
	</html>

view raw gistfile1.html hosted with ❤ by GitHub