How to get the values of Select All Checkbox using jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to get the values of Select All Checkbox using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<SCRIPT language="javascript">
$(document).ready(function() {
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.item').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox and viceversa
$(".item").click(function(){
if($(".item").length == $(".item:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
//get the values of selected checkboxes
$("button").click(function(){
var favorite = [];
$.each($("input[name='programming']:checked"), function(){
favorite.push($(this).val());
});
alert("My favourite Programming are: " + favorite.join(", "));
});
});
</SCRIPT>
</head>
<body>
<form>
<p><h1>How to get the values of Select All Checkbox using jQuery</h1></p>
<label>Select your favorite programming <br/>
Select All Checkbox <input type="checkbox" id="selectall"/></label><br/>
<input type="checkbox" name="programming" class="item" value="Jquery"/>
Jquery<br/>
<input type="checkbox" name="programming" class="item" value="php mysql"/>
php mysql<br/>
<input type="checkbox" name="programming" class="item" value="3"/>
Java<br/>
<input type="checkbox" name="programming" class="item" value="4"/>
Javascript<br/>
<input type="checkbox" name="programming" class="item" value="5"/>
Python<br/>
<input type="checkbox" name="programming" class="item" value="6"/>
Ruby<br/>
<button type="button">Get Values</button>
</form>
</html>
VIDEO
How to get the values of Select All Checkbox using jQuery
<!DOCTYPE html>
<html>
