jQuery Form How to - Select all inputs not checked and highlights the next sibling span

Question

We would like to know how to select all inputs not checked and highlights the next sibling span.

Answer


<!-- w  w w  . j  a v a 2 s . c  om-->
<html>
  <head>
    <script type="text/javascript" src='http://code.jquery.com/jquery-1.5.2.js'></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("input:not(:checked) + span").css("background-color", "yellow");
        });
    </script>
  </head>
  <body>
    <div>
        <input type="checkbox" name="a" />
    
        <span>A</span>
      </div>
      <div>
        <input type="checkbox" name="b" />
        <span>B</span>
      </div>
      <div>
        <input type="checkbox" name="c" checked="checked" />
    
        <span>C</span>
    </div>

    </body>
</html>

The code above is rendered as follows: