w3resource

jQuery: Find all inputs without specified color and appends text to the span next to it

jQuery Fundamental - I : Exercise-34

Finds all inputs that don't have the name 'color' and appends text to the span next to it.

<body>
<div>
<input type="radio" name="color"  value="Red">
<span>Red</span>
</div>
<div>
<input type="radio" value="Cold Fusion">
<span>Sky</span>
</div>
<div>
<input type="radio" name="accept"  value="Evil Plans">
<span>Sea</span>
</div>
<button id="button1">Click to see the  effect</button>
</body>

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Finds all inputs that don't have the name 'color' and appends text to the span next to it.</title>
<style type="text/css">
button {
display: block;
margin: 20px 0 0 0;
} 
</style>
</head>
<body>
<div>
<input type="radio" name="color" value="Red">
<span>Red</span>
</div>
<div>
<input type="radio" value="Cold Fusion">
 <span>Sky</span>
 </div>
 <div>
 <input type="radio" name="accept" value="Evil Plans">
 <span>Sea</span>
 </div>
 <button id="button1">Click to see the effect</button>
 </body>
 </html>

JavaScript Code :

$('#button1').click(function(){ 
$( "input[name!='color']" ).next().append( "<b>: not a color</b>" );
});

See the Pen jquery-fundamental-exercise-34 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Finds all inputs with a value of "Red" and changes the text of the next sibling span.
Next: Finds all inputs with an attribute name that starts with 'P' and puts text in them.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Share this Tutorial / Exercise on : Facebook and Twitter