Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Password Toggle & Strength</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <input id="pwd" type="password" placeholder="Password"> <label><input type="checkbox" id="show"> Show</label> <div id="strength"></div> <script> $("#show").change(function(){ $("#pwd").attr("type", this.checked ? "text" : "password"); }); $("#pwd").on("input", function(){ var s = this.value.length; $("#strength").text(s>=8 ? "Strong" : s>=5 ? "Medium" : "Weak"); }); </script> </body> </html>
Output