Open In App

How to find all inputs with a value Green and change the text of next sibling span using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 – 



Last Updated : 30 Apr, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads