jQuery
jQuery :not() Selector Examples
Have you ever come across the jQuery not selector? If yes, did you wonder how & why it’s used? In this article, I am going to show by means of a simple to follow example on how to use the :not() selector in jQuery. So read on to find out more.
How to use the jQuery not() Selector
For the sake of the example, let’s assume that we have few checkboxes and we would like to alert the index & the value of the “not” checked checkboxes or the “unchecked” checkboxes when a button is clicked.
Example: HTML + jQuery source code for using jQuery .not() selector
<html>
<head>
<title>Examples of using the .not() Selector in jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
Hit the button below to alert the checkboxes that were "not" checked :<br>
<form name="form1" method="post" action="">
<p>
<label>
<input type="checkbox" name="fruits" value="apple" id="fruits_0">
Apple</label>
<br>
<label>
<input type="checkbox" name="fruits" value="mango" id="fruits_1">
Mango</label>
<br>
<label>
<input type="checkbox" name="fruits" value="grapes" id="fruits_2">
Grapes</label>
<br>
</p>
<input type="submit" name="sbt_alert" id="sbt_alert" value="Alert "not" checked checkboxes">
</form>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
$('#sbt_alert').on("click", function(){
$('input[name="fruits"]:not(:checked)').each(function(index) {
alert(index + ': ' + $(this).text() + $(this).val() );
});
return false;
});
});
</script>
</body>
</html>That’s it!
Do you know of any other ways to use the jQuery not selector? Feel free to suggest by commenting below.