Checkboxes let us make multiple choices. But how do you actually use them in JavaScript? It might seem tricky, especially if you're new to web development.
Well, don't worry, because we're going to make it all crystal clear. We'll show you, step by step, how to get values from multiple checkboxes. Whether you're building a to-do list app or making a filter for your online store, our blog will break it down in simple terms.
So, let's get ready to understand checkboxes and boost your web development skills!
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Multiple Checkbox Value In Javascript - Websolutionstuff</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<style>
body{
margin:100px;
}
</style>
<body>
<h3>Get Multiple Checkbox Value In Javascript - Websolutionstuff</h3>
<form>
<h3>Select languages:</h3>
<label><input type="checkbox" value="laravel" name="language"> Laravel </label>
<label><input type="checkbox" value="php" name="language"> PHP </label>
<label><input type="checkbox" value="javascript" name="language"> JavaScript </label>
<label><input type="checkbox" value="jquery" name="language"> jQuery </label>
<label><input type="checkbox" value="mysql" name="language"> MySQL </label>
<label><input type="checkbox" value="css" name="language"> CSS </label>
<label><input type="checkbox" value="python" name="language"> Python </label>
<br><br>
<button type="button">Get Selected Values</button><br>
<p></p>
</form>
<script>
$(document).ready(function() {
$("button").click(function(){
var arr = [];
$.each($("input[name='language']:checked"), function(){
arr.push($(this).val());
});
$("p").text("Your selected languages are: " + arr.join(", "));
});
});
</script>
</body>
</html>
Output:
Fetching multiple checkbox values in JavaScript is a valuable skill for creating interactive forms. With the steps explained in this blog, you've gained the ability to build forms that allow users to make several selections effortlessly.
Keep experimenting and practicing to expand your JavaScript skills. As you get more comfortable, you'll be able to create user-friendly and dynamic web applications. Embrace the learning journey and enjoy crafting impressive, user-centric web experiences.
You might also like :
In this tutorial, we will see you example of vue js get an array of length or object length. we will learn about vu...
Jan-07-2022
In this article, we will see laravel 9 group by query example. how to use group by in laravel 9. As you might expec...
Mar-29-2022
In this tutorial we will learn about laravel 8 one to many polymorphic relationship. A one-to-many polymorphic rela...
Nov-19-2021
In this post i will show you datatables localization example, jquery datatable plugin can localize a...
May-10-2021