$('.show-password').change(function() {
if ($("#form-fields_show-password").attr('checked')) {
var showValue = $('#form-fields_password').val();
var showPassword = $('<input type="text" size="50" required="required" name="form- fields[password]" id="form-fields_password" class="password required" value="'+showValue+'">');
$('#form-fields_password').replaceWith(showPassword);
} else {
var hideValue = $('#form-fields_password').val();
var hidePassword = $('<input type="password" size="50" required="required" name="form-fields[password]" id="form-fields_password" class="password required" value="'+hideValue+'">');
$('#form-fields_password').replaceWith(hidePassword);
}
});
Something like this will find the input area, and store the value in a variable called showValue. Then you can replace the element with type="password", with new html where type="text" and if the checkbox is unchecked the value will be dropped into password type field.
There is a problem with this method in that the password type value will be visible in the code, however to get round this you can always remove the value attribute from the password type and just force the user to re-type. If you can live with that in you application.