Show or Hide Password with a Checkbox

A Show Password checkbox changes the input's type between password and text. Read checkbox state with .prop("checked").

jQuery Top ↑

$( "#show_password" ).on(
    "change",
    function () {
        $( "#password" ).attr(
            "type",
            $( this ).prop( "checked" )
                ? "text"
                : "password"
        );
    }
);

HTML Top ↑

<input type="password"
       id="password"
       name="password">

<label>
    <input type="checkbox"
           id="show_password">
    Show password
</label>

Plain JavaScript Alternative Top ↑

const checkbox =
    document.querySelector( "#show_password" );

const password =
    document.querySelector( "#password" );

checkbox.addEventListener(
    "change",
    function () {
        password.type = this.checked
            ? "text"
            : "password";
    }
);

← Checkbox tutorial

Additional Original Learning Routes Top ↑

These original tutorial/demo routes are retained so no useful learner path is lost:

• button.php
• listbox.php
• radio-button.php
• textbox.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: