Below code snippet explains how to get all HTML input checkbox based on their class attribute using jQuery.
<input type="checkbox" id="Checkbox1" class = "chk" value = "1" />
<input type="checkbox" id="Checkbox2" class = "chk" value = "2" />
<input type="checkbox" id="Checkbox3" class = "chk" value = "3" />
<input type="checkbox" id="Checkbox4" class = "chk" value = "4" />
<script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<input type="button" id="demo" value = "Demo" />
<script type="text/javascript">
$("#demo").live("click", function () {
$("input:checkbox[class=chk]").each(function () {
alert("Id: " + $(this).attr("id") + " Value: " + $(this).val() + " Checked: " + $(this).is(":checked"));
});
});
</script>
Explanation:
In the above example a click event handler has been assigned to the HTML input button. When the button is clicked, jQuery finds all the checkboxes with class name “chk” using input:checkbox[class=chk] selector and then the Id, value and state of the all HTML input checkboxes are displayed in alert using jQuery.