In this article, we will learn how we can set and get multiple checkboxes values using jQuery.
Prerequisites:
- Basic knowledge of JavaScript
You can use the following code for performing the functionality.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-1 ">
<label class="control-label">Hobbies </label>
</div>
<div class="col-sm-6 col-md-3">
<div class="form-check">
<input type="checkbox" id="chk1" class="form-check-input" value="Games" /> Games
<input type="checkbox" id="chk2" class="form-check-input" value="Reading" /> Reading
<input type="checkbox" id="chk3" class="form-check-input" value="Music" /> Music
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2 ">
<button type="button" class="btn btn-primary" id="btnSet" value="SET">SET</button>
</div>
<div class="col-sm-2 ">
<button type="button" class="btn btn-info" id="btnGet" value="GET">GET</button>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
var setCheckBoxValue = '';
$(document).on("click", "#btnSet", function () {
var hobbiesData = ["Games","Music"]
$('.form-check-input[type="checkbox"]').map(function () {
hobbiesData.includes($(this).val()) ? $(this).prop('checked', true) : $(this).prop('checked', false)
});
});
$(document).on("click", "#btnGet", function () {
setCheckBoxValue = $('.form-check-input[type="checkbox"]:checked').map(function () {
return $(this).val()
}).get().join(',');
alert(setCheckBoxValue);
});
});
</script>
</html>
OUTPUT
I hope you guys understand how we can do that.
Let me know if you face any difficulties.
