JavaScript-取消选中鼠标上的复选框

我正在尝试实现一个简单的“显示密码”切换复选框，以便在按住鼠标的同时显示纯文本密码，一旦放开，它将恢复为密码字段

我已经实现了

输入

字段的切换，但是我也使用了一个复选框来显示切换状态，并且我可以选中

鼠标向下

上的复选框，但是我尝试取消选中该复选框的操作并不十分有效

这是我到目前为止得到的

这几乎是可行的，但是如果用户快速双击，那么他们可以在选中复选框的情况下打破它。 有更好的方法吗？

使用以下方法：

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

---

它工作正常，但这仅适用于

.pw\u show

。因此，如果您在另一层上执行

mouseup

，它将不起作用。我注意到您的输入没有稳定的宽度

您可以使用removeAttr：

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

---

使用jquery中的change event来选中复选框，并根据您更改的文本框类型进行选择

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

      });

如果你想鼠标向下和向上移动，像这样使用

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

});

---

我的代码的问题是

setTimeout

函数的拼写。在解决这个问题之后，我添加了一个小延迟，允许选中复选框，并在单击保持和释放时取消选中复选框

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

---

您可以在

mouseup

事件中删除

SetTimeOut（）

函数调用后重试。函数名为

SetTimeOut

而不是

SetTimeOut

。另外，出于安全原因，大多数浏览器不允许更改输入的

type

属性。@未定义doh！这就足够解决它了…傻马应该在复选框上使用“更改”侦听器，而不是“鼠标向下”和“鼠标点击”@Hacketo，这大概只有在点击并放开后才会起作用，因为默认情况下，复选框状态在鼠标点击被释放之前不会改变。@Novocaine88如果您不满意其他答案，请检查我的演示不是我想要的功能。我希望在单击保持时显示/隐藏复选框和密码，然后在释放鼠标后恢复。此答案仅提供单击开/关切换。然而，我已经从Unfineds评论中得到了我需要的答案。我只是拼错了超时函数。@Novocaine88.好吧，我误解了你的问题，不管怎样，你得到了解决方案：）这与

$（'.pw_show input'）.prop（'checked'，false）基本相同并且不是问题所在。我已根据undefined的建议修复了该问题不完全确定您的意思，但是我已经尝试使用
removeAttr（）
但这不是问题所在。超时函数的拼写是问题所在。无论如何，谢谢你。
$('.pw_show').on('mouseup', function () {
    pwi.prop('type', 'password');
    setTimeout(function() {
        $('.pw_show input').prop('checked', false);
    }, 50);
});