Question

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

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

密码输入框上的ID是“密码”。

有什么建议吗？感谢

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">')
        });
   }
}

jquery复选框设置输入类型

2 个答案:

实施例