Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Form Selectors</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>.hit{background:#e1f5fe;}</style> </head> <body> <form id="f"> <input type="text" name="t" placeholder="text"> <input type="number" name="n" value="5"> <input type="checkbox" class="hobby" value="Music"> <input type="checkbox" class="hobby" value="Sports" checked> <select><option>One</option><option selected>Two</option></select> </form> <button id="all">:input</button> <button id="checked">:checked</button> <button id="selected">:selected</button> <script> function reset(){ $(":input").removeClass("hit"); } $("#all").click(function(){ reset(); $(":input").addClass("hit"); }); $("#checked").click(function(){ reset(); $(":checked").addClass("hit"); }); $("#selected").click(function(){ reset(); $("option:selected").addClass("hit"); }); </script> </body> </html>
Output