almost 9 years ago
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>
<!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>
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
0 Comment(s)