over 8 years ago
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>
<!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 hereif ($("#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>
<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>
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
0 Comment(s)