JavaScript - Uncheck Check Box On Mouseup

I'm trying to implement a simple 'show password' toggle check box so that whilst the mouse is held down, the plain text password is shown, and once it's let go it reverts back to a

Solution 1:

Use this:

$(".pw_show input").attr("checked","");

Solution 2:

It works correctly, but this works only for .pw_show. So if you mouseup at the another layer, it does not work. I noticed that your Input has not stable width.

You can either use removeAttr:

$(".pw_show input").removeAttr("checked");

Solution 3:

Use change event in jquery to to check a check box ,based on that you change the text box type

    var pwi = $('#new_pass');
      $('.pw_show').find("input[type=checkbox]").on('change', function () {
           pwi.prop("type", (this.checked) ? "text" : "password");

      });

UPDATED DEMO

If you want mousedown and mouse up,use like this

 var pwi = $('#new_pass');

$('.pw_show').find("input[type=checkbox]").mousedown('change', function () {
    pwi.prop("type",  "text" );

});
$('.pw_show').find("input[type=checkbox]").mouseup('change', function () {

    pwi.prop("type",  "password");

});

USING MOUSEDOWN/MOUSEUP

Solution 4:

The problem with my code was the spelling of the setTimeout function. After fixing this, the small delay I added, allowed the check box to be checked and unchecked on click hold and release.

$('.pw_show').on('mouseup', function () {
    pwi.prop('type', 'password');
    setTimeout(function() {
        $('.pw_show input').prop('checked', false);
    }, 50);
});

Fixed Fiddle