Question

I have a html page which requires two passwords, if these do not match a div appears to say so. Within the div a checkbox is also shown when the user checks this it should change the password type to text and vice versa. I seem to be having problems detecting if the checkbox is detected or not.

$("#password_error").html('Passwords do not match <br /> <span class="password_error"><input type="checkbox" id="password_text" /> Show Characters</span>');
  $("#password_error").show("slow");
  checkbox_status();

function checkbox_status()
{
 if ($('#password_text').is(':checked'))
 {
  $('input:password[type="text"]');
 }
}

The ID on the input box for password is “password”.

Any advice? Thanks

Answer 1

You can use:

$('#check').attr('checked');

It will show true or false.

Example

As Dave pointed out, changing the type isn’t a good idea, a better idea is to have two inputs, one text and one password. Start with the password showing and the text hidden, that way if javascript is disabled it degrades peacefully. You can then toggle each and update the value on check. Here’s a working example:

$(document).ready(function() {
    $('#check').click(function() {
        if ($(this).attr('checked')) {
            $('#plaintext').show().val($('#password').val());
            $('#password').hide();
        } else {
            $('#password').show().val($('#plaintext').val());
            $('#plaintext').hide();
        }
    });
});

http://jsfiddle.net/P8tg5/