w3resource

jQuery: Find all inputs with a specified value and changes the text of the next sibling span

jQuery Fundamental - I : Exercise-33

Finds all inputs with a value of "Red" and changes the text of the next sibling span.

<body>
<div>
<label>
<input type="radio" name="color"  value="Red">
<span>name?</span>
</label>
</div>
<div>
<label>
<input type="radio" name="color"  value="Green">
<span>value?</span>
</label>
</div>
<div>
<label>
<input type="radio" name="color"  value="Black">
<span>value?</span>
</label>
</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 with a value of "Red" and changes the text of the next sibling span.</title>
  <style type="text/css">
  button {
  display: block;
  margin: 20px 0 0 0;
  } 
  </style>
</head>
<body>
<div>
<label>
<input type="radio" name="color" value="Red">
<span>name?</span>
</label>
</div>
<div>
<label>
<input type="radio" name="color" value="Green">
<span>value?</span>
</label>
</div>
<div>
<label>
<input type="radio" name="color" value="Black">
<span>value?</span>
</label>
</div>
<button id="button1">Click to see the effect</button>
</body>
</html>

JavaScript Code:

$('#button1').click(function(){ 
$( "input[value='Red']" ).next().text( " Red " );
});

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


Contribute your code and comments through Disqus.

Previous: Using jQuery find all the divisions with a name attribute that contains the word 'tutorial' and sets the background color yellow.
Next: Finds all inputs that don't have the name 'color' and appends text to the span next to it.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Share this Tutorial / Exercise on : Facebook and Twitter