Hello guys, In the last tutorial, you have learned how to get all the checked checkboxes from a page using jQuery, but sometimes you also need all the checkboxes which are not selected. In this tutorial, you will learn that. If you remember, we have used the:checked pseudo selector to get all checked checkboxes, but, unfortunately, there is nothing like the :unchecked selector in jQuery, so using that will result in the syntax error. Even the!:checked or :!checked will not work, instead, you need to use not() jQuery selector, which does the negation job.
So, to select all the unchecked checkboxes, you can use the following jQuery selector code:
It first gets all input elements with type as the checkbox and then those for which checked property is not defined, i.e. all the uncheck checked boxes. You can also use the jQuery selector:
but using input[type=checkbox] is faster and you should stick with it.
Also, things have changed a lot in the last few years with so many JavaScript enhancements like ES6 and TypeScript. Now you can do most of the things in plain Javascript which requires jQuery, hence a good knowledge of modern JavaScript is essential for any developers.
If you want to learn Modern JavaScript or level up your skills then I suggest you join The Complete JavaScript Course: Build Real Project by Jonas Scmedtmann on Udemy. It's one of the best and hand-son course to learn ES 6 and other new Javascript features.
For example, you need to use the each() function to iterate through each unselected checkbox to do something like printing their name, id, and value or cleaning them for the next round. If you want to learn more about the common jQuery functions like val() and attr() and others then I also suggest you go through The Complete jQuery course on Udemy.
Anyway, this jquery example will give you a working platform.
And, here is the output of the code when I run it by first unchecking one checkbox and then subsequently un-checking two and three checkboxes. You just need to reload once you uncheck a checkbox to allow the jQuery code to work.
That's all about how to find all unselected checkboxes using jQuery. Just remember, the only change is using not() jQuery selector from our earlier example. Similarly, if you want to get the value of all checked checkboxes then just remote the not() operator from the code and it will work fine.
Further Reading
Up and Running with jQuery.
jQuery Fundamentals By Dan Wahlin
The Complete jQuery Course: From Beginner To Advanced!
Other JavaScript and jQuery tutorials you may like to explore
Thanks for reading this article so far, If you find this jQuery tutorial useful then please share it with your friends and colleagues. If you have any questions or feedback, then please drop a comment.
So, to select all the unchecked checkboxes, you can use the following jQuery selector code:
$('input[type=checkbox]:not(:checked)')
It first gets all input elements with type as the checkbox and then those for which checked property is not defined, i.e. all the uncheck checked boxes. You can also use the jQuery selector:
$("input:checkbox:not(:checked)")
but using input[type=checkbox] is faster and you should stick with it.
Also, things have changed a lot in the last few years with so many JavaScript enhancements like ES6 and TypeScript. Now you can do most of the things in plain Javascript which requires jQuery, hence a good knowledge of modern JavaScript is essential for any developers.
If you want to learn Modern JavaScript or level up your skills then I suggest you join The Complete JavaScript Course: Build Real Project by Jonas Scmedtmann on Udemy. It's one of the best and hand-son course to learn ES 6 and other new Javascript features.
jQuery example to get all unselected checkboxes
Nothing is better than a simple example to see things working. Even though the solution in jQuery is usually one-liner, you need a little bit more to use it practically.For example, you need to use the each() function to iterate through each unselected checkbox to do something like printing their name, id, and value or cleaning them for the next round. If you want to learn more about the common jQuery functions like val() and attr() and others then I also suggest you go through The Complete jQuery course on Udemy.
Anyway, this jquery example will give you a working platform.
<html> <head> <title>How to find all unchecked checkboxes in jQuery</title> </head> <body> <h2>Getting all unchecked checkboxes value in jQuery</h2> <input type="checkbox" id="read" checked="checked" /> <input type="checkbox" id="write" checked="checked" /> <input type="checkbox" id="speak" /> <div id="output"></div> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script> $(document).ready(function(){ $('input[type=checkbox]:not(:checked)').each(function(){ var status = (this.checked ? $(this).val() : ""); var id = $(this).attr("id"); $('#output').append("<h3>" + id + " : " + status + "</h3>"); }); }); </script> </body> </html>
And, here is the output of the code when I run it by first unchecking one checkbox and then subsequently un-checking two and three checkboxes. You just need to reload once you uncheck a checkbox to allow the jQuery code to work.
That's all about how to find all unselected checkboxes using jQuery. Just remember, the only change is using not() jQuery selector from our earlier example. Similarly, if you want to get the value of all checked checkboxes then just remote the not() operator from the code and it will work fine.
Further Reading
Up and Running with jQuery.
jQuery Fundamentals By Dan Wahlin
The Complete jQuery Course: From Beginner To Advanced!
Other JavaScript and jQuery tutorials you may like to explore
- Top 10 Courses to learn Angular for web developers (courses)
- Top 10 Courses to learn JavaScript (courses)
- How to redirect an URL using jQuery? (tutorial)
- Top 5 free Courses to learn Node.js for web developers (courses)
- How to get current URL parameters using jQuery? (tips)
- My favorite free JavaScript online tutorials (see)
- 10 Examples of jQuery selectors (examples)
- How to get hash and path from current URL using jQuery? (tutorial)
- Top 5 Courses to learn React.js and Redux (courses)
- 3 ways to solve jQuery: Uncaught Reference: $ is not defined error (solution)
- 20 jQuery Interview Questions for Web Developers (list)
- Difference between the jQuery document.ready() function and JavaScript window.onload (answer)
- Top 5 books to learn JavaScript for Web Developers (books)
- How to use jQuery class and ID selector on a page? (example)
- Top 5 Courses to learn jQuery online for FREE (courses)
Thanks for reading this article so far, If you find this jQuery tutorial useful then please share it with your friends and colleagues. If you have any questions or feedback, then please drop a comment.
P. S. - A good knowledge of Modern JavaScript is essential for any web developer as now you can do most of the things in plain JavaScript which requires jQuery earlier. If you want to learn Modern JavaScript or level up your skills, then I suggest you join The Complete JavaScript Course: Build Real Project by Jonas Scmedtmann on Udemy.
No comments :
Post a Comment