Cairo-Coders is the one place for high quality web development, Web Design and software development tutorials and Resources programming. Learn cutting edge techniques in web development, design and software development, download source components and participate in the community.
How to get the values of Select All Checkbox using jQuery
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>