Skip to content

Instantly share code, notes, and snippets.

@nextechu

nextechu/checkbox-jquery.html

Last active January 3, 2016 17:09
Show Gist options
  • Save nextechu/8494411 to your computer and use it in GitHub Desktop.
Save nextechu/8494411 to your computer and use it in GitHub Desktop.
Download ZIP
A click event handler has been assigned to the HTML input button. When the button is clicked, jQuery finds all the checkboxes with name “chk” using input:checkbox[name=chk] selector and then the Id, value and state of the all HTML input checkboxes are displayed in alert using jQuery.
Raw
checkbox-jquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Select checkboxes</title>
</head>
<body>
<input type="checkbox" id="Checkbox1" name ="chk" value ="1" />
<input type="checkbox" id="Checkbox2" name ="chk" value ="2" />
<input type="checkbox" id="Checkbox3" name ="chk" value ="3" />
<input type="checkbox" id="Checkbox4" name ="chk" value ="4" />
<input type="button" id="demo" value ="Demo" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script>
$("#demo").live("click", function () {
$("input:checkbox[name=chk]").each(function () {
alert("Id: " + $(this).attr("id") + " Value: " + $(this).val() + " Checked: " + $(this).is(":checked"));
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment