Hi Reader's,
Welcome to FindNerd,today we are going to discussion on select and unselect all check boxes on a click.
If we want to select all check boxes in your web application, so we have to follow below process:
Firstly we have to make a view in Html to show check boxes and also put a button for selecting all check boxes together just on a single click and also remove the selection on a single click.
you can see below view in Html
<!DOCTYPE html>
<html>
<head>
<title>Check Boxes</title>
<!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<h1>Select and Unselect Check Box</h1>
<div class="button">
<input class="check" id="Item 1" name="option1" type="checkbox">
<label class="label1" for="Item 1">Box 1</label>
<input class="check" id="Item 2" name="option1" type="checkbox">
<label class="label1" for="Item 2">Box 2</label>
<input class="check" id="Item 3" name="option1" type="checkbox">
<label class="label1" for="Item 3">Box 3</label>
<input class="check" id="Item 4" name="option1" type="checkbox">
<label class="label1" for="Item 4">Box 4</label>
</div><br>
<input id="checkAll" type="button" value="Submit ">
</body>
</html>
This is Html part in which we can see there are four check boxes and a button.
Now we have to write Javascript code for functionality to select all and unselect all just click on submit button.
you can see below code for better understanding
<script>
$(document).ready(function(){
// Below code is used to remove all check property with class check options.
$(".check").click(function() {
$("#checkAll").attr("data-type", "uncheck");
});
// Below code is used to remove all check property with name=option2 options
$("input[name=option2]").click(function() {
$("#selectall").prop("checked", false);
});
// JS for Check/Uncheck all CheckBoxes by Button //
$("#checkAll").attr("data-type", "check");
$("#checkAll").click(function() {
//check condition here
if ($("#checkAll").attr("data-type") === "check") {
$(".check").prop("checked", true);
$("#checkAll").attr("data-type", "uncheck");
}else{
$(".check").prop("checked", false);
$("#checkAll").attr("data-type", "check");
}
})
});
</script>
0 Comment(s)