How To Get Checked And Unchecked Checkbox Value In jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Amruta
In this article we will show you the solution of how to get checked and unchecked checkbox value in jquery, toggle checkboxes that are used to activate particular activities are frequently found in our web apps.
When used in this manner, checkbox toggles serve a limited number of purposes, necessitating the usage of jquery or JavaScript to maintain and read their states. Let's talk about the idea of getting checked and unchecked values in jQuery now.
Step By Step Guide On How To Get Checked And Unchecked Checkbox Value In jQuery :-
In this initial use-case, we want to be able to read the state of a checkbox while a user navigates a web application.
To obtain the value for this, JQuery can be used in a single line.
Method 1
The is() method is used in Method 1
Method 2.
Using the.prop() method with the 'checked' option, as described
How To Use JQuery To Set A Checkbox
What happens if we want a checkbox's state to be changed automatically? We can use JQuery to automate this procedure so that no user clicks to check or uncheck the box.
Method 1
Once more, the.prop() method is used, but this time a boolean second parameter is used. True for a tick and false for a no tick—you guessed it!
Method 2
We can also access the DOM directly and change the checked value there. Note: If the class name is used more than once, take caution while picking with a.class!
JQuery - Get Checkbox Value
We can quickly obtain the value with just one line of code by keeping in mind the numerous ways that check boxes can be interacted with.
$('#cb')[0].checked;
This could be saved in a variable or recorded to the console.
Listen To Checkbox Change
So now that we are aware of how to retrieve, check, and set a check box's value, we want to hear when it changes.
As a result, whenever the element is modified, we can log its status.
Method 1
Using the.on() method and the 'change' parameter is one technique by which we can complete this operation.
Method 2
In order to resolve this issue, the.change() function can be used directly.
<html>
<head>
<title>
Talkerscode
</title>
</head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<body style="text-align:center;" id="body">
<h1 style="color:black;">
TalkersCode
</h1>
<p id="TC_UP">
</p>
<input type="checkbox" name="type" value="TalkersCode" /> TalkersCode:
<input type="checkbox" name="type" value="TalkersTech" /> TalkersTech:
<input type="checkbox" name="type" value="TC" /> TC:
<input type="checkbox" name="type" value="TT" /> TT:
<br>
<button>
Click Me
</button>
<p id="TC_DOWN">
</p>
<script>
$('#TC_UP')
.text('First check few elements then click on the button.');
$('button').on('click', function() {
var array = [];
$("input:checked").each(function() {
array.push($(this).val());
});
$('#TC_DOWN').text(array);
});
</script>
</body>
</html>
- We write the code for getting the selected checkbox value in jquery.
- We start our code with the help of HTML and Head Tags.
- Then we provide title to our page.
- After that we use the script in which we load a hosted library, to load jQuery, .
- Then we start our body of the program in which we provide the alignment text color.
- We also give heading by using h1 tag.
- Then we provide the id for our p class.
- After that we create some statements for checking using checkboxes.
- Then we create the button named as click me.
- Then we create another id for p class.
- Then We start or another script.
- In script we use jQuery text() method.
- After that to trigger the onclick function in jQuery, click() method is used.
- After that we create an array using var keyword.
- Then calls the .each() method to each element and finally push them into the array.
- Then again we use jquery text() method for printing selected items.
- Then we close our script.
- And we end with Body and HTML tags
Conclusion :-
As a result, we have successfully learned how to use jQuery to retrieve the value of a checked or unchecked checkbox.
One of the best things about JQuery is that there are frequently other ways to accomplish the same task, allowing us more coding flexibility.
In this article, we learnt how to use the JQuery library to interact with the checkbox input element.
I hope this article on how to get checked and unchecked checkbox value in jquery helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
