设置输入类型的jquery复选框

Question

我有一个需要两个密码的html页面，如果这两个密码不匹配，div似乎会这样说。在div中，还会显示一个复选框，当用户选中此复选框时，应将密码类型更改为text，反之亦然。我似乎在检测是否检测到复选框时遇到问题。

$("#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"]');
 }
}

password输入框中的ID为"password“。

有什么建议吗？谢谢

Answer 1

您可以使用：

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

它将显示真或假。

示例

正如Dave指出的，更改类型不是一个好主意，更好的想法是有两个输入，一个文本和一个密码。从显示密码和隐藏文本开始，这样如果javascript被禁用，它就会平静地降级。然后，您可以切换每个选项，并在检查时更新值。下面是一个有效的示例：

$(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/

Answer 2

工作演示

http://jsfiddle.net/sB9NJ/

html

   password: <input type='password' id='password1'><br>
    retype password: <input type='password' id='password2'><br>
    <div id='messageHolder' style="display:none">
    show passwords<input type='checkbox' id='togglePassword' />
    </div>

Javascript

      jQuery(function(){
   jQuery('#password2').bind('blur',_checkPasswords);
    jQuery('#togglePassword').bind('change',_togglePasswordText);
});

    function _checkPasswords()
    {
        if(jQuery('#password1').val()!=jQuery('#password2').val())
        {
             jQuery('#messageHolder').show();
        }
    }

function _togglePasswordText()
{
  if(jQuery('#togglePassword').is(':checked'))
    {       
        jQuery('#password2,#password1').each(function(){
            var _elm= jQuery(this);
            var _val=_elm.val();
            var _id= _elm.attr('id')
            jQuery(this).replaceWith('<input id='+_id+' value='+_val+' type="text">')
        });
     }
   else
   {
        jQuery('#password2,#password1').each(function(){
            var _elm= jQuery(this);
            var _val=_elm.val();
            var _id= _elm.attr('id')
            jQuery(this).replaceWith('<input id='+_id+' value='+_val+' type="password">')
        });
   }
}