not( ) selector is used to modify the attributes of those who does not match the given selector. It prevents us from complex coding as we can manipulate properties of those which does not match the provided set of elements.
As shown below, the not selected input box having span as their child will have background color of yellow. similarly we can style unchecked checkboxes radio buttons.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>not demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>
<input type="checkbox" name="a">
<span>Mary</span>
</div>
<div>
<input type="checkbox" name="b">
<span>lcm</span>
</div>
<div>
<input type="checkbox" name="c" checked="checked">
<span>Peter</span>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("input:not(:checked)+ span").css("background-color","yellow");
})
</script>
</body>
</html>
0 Comment(s)