Skip to content
Related Articles

Related Articles

Improve Article
How to find all inputs with a value Green and change the text of next sibling span using jQuery ?
  • Last Updated : 30 Apr, 2021

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 – 




My Personal Notes arrow_drop_up
Recommended Articles
Page :