How to find all inputs with a value Green and change the text of next sibling span using jQuery ?
The purpose of this article is to find all the inputs with a value “Green” and changes the text of the next sibling span using jQuery.
Used Methods –
next() method – This method is used to returns the next sibling element of the selected element.
text() method – This method is used to returns the text content of the selected elements.
Approach –
- Create an HTML page with some input values of different color names.
- Find the input with value = “Green” and changes the text of its next sibling span.
Example –
HTML
<!DOCTYPE html> <html> <head> <style type="text/css"> body { text-align: center; font-size: 20px; } button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } </style> </head> <body> <h1 style="color:green"> GeeksForGeeks</h1> <h2>Find the input with value = "Green" ?</h2> <div> <form> <input type="checkbox" value="Red"> <span>value is Red</span><br> <input type="checkbox" value="Green"> <span>value is Red</span><br> <input type="checkbox" value="Red"> <span>value is Red</span><br> <input type="checkbox" value="Red"> <span>value is Red</span><br> <input type="checkbox" value="Red"> <span>value is Red</span><br> <input type="checkbox" value="Red"> <span>value is Red</span><br> </form> </div> <br> <button>Click to see the answer.</button> <script> $('button').click(function() { $("input[value='Green']").next().text(" Green "); }); </script> </body> </html> |
Output –
Before clicking the button –
After clicking the button –
Please Login to comment...