JavaScript - 取消选中 mouseup 上的复选框答案

【问题标题】：JavaScript - uncheck check box on mouseupJavaScript - 取消选中 mouseup 上的复选框
【发布时间】：2014-07-29 18:00:11
【问题描述】：

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

我已经让input 字段的切换正常工作，但是我也使用复选框来显示切换状态，我可以选中mousedown 上的框但是我尝试取消选中盒子不太好用。

这是我到目前为止所得到的；

DEMO

var pwi = $('#new_pass');

$('.pw_show').on('mousedown', function () {
    $('.pw_show input').prop('checked', true);
    pwi.prop('type', 'text');
});

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

这几乎可以工作，但是如果用户快速双击然后他们可以打破它留下选中的复选框。有没有更好的方法来做到这一点？

【问题讨论】：

您可以在删除mouseup事件中的SetTimeOut()函数调用后尝试。
函数名是setTimeout而不是setTimeOut。另请注意，出于安全原因，大多数浏览器不允许更改输入的 type 属性。
@undefined doh！这足以解决它......我很傻
应该在复选框上使用 'change' 监听器，而不是 'mousedown' 和 'mouseup'
@Haketo 大概只有在单击并松开后才会起作用，因为默认情况下复选框状态在释放鼠标单击之前不会改变。

标签： javascript jquery html checkbox

【解决方案1】：

使用这个：

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

【讨论】：

这与$('.pw_show input').prop('checked', false); 基本相同，不是问题。我已经按照 undefined 的建议解决了这个问题

【解决方案2】：

它可以正常工作，但这仅适用于.pw_show。所以如果你在另一层mouseup，它就不起作用。我注意到您的 Input 宽度不稳定。

您可以使用 removeAttr:

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

【讨论】：

不完全确定您的意思，但是我已经尝试过使用removeAttr()，但这不是问题。我对超时功能的拼写是问题所在。还是谢谢。

【解决方案3】：

在jquery中使用change事件来检查一个复选框，基于你改变文本框类型

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

      });

UPDATED DEMO

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

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

});

USING MOUSEDOWN/MOUSEUP

【讨论】：

@Novocaine88 如果您不满意其他答案，请查看我的演示
这不是我想要的功能。我希望在单击 hold 时显示/隐藏复选框和密码，然后在释放鼠标后恢复。此答案仅提供单击开/关切换。然而，我从未定义的评论中得到了我需要的答案。我只是把超时功能拼错了。
@Novocaine88 。好吧，我误解了你的问题，无论如何你得到了解决方案:)

【解决方案4】：

我的代码的问题是setTimeout 函数的拼写。修复此问题后，我添加的小延迟允许在单击按住和释放时选中和取消选中复选框。

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

Fixed Fiddle

【讨论】：