更改无法正常工作的复选框的属性

Change attribute for a checkbox not working correctly

本文关键字：工作 复选框 属性 常工作      更新时间：2023-09-26

我有很多输入框，不同页面的密码类型。现在我有一个小复选框，上面写着"显示密码"，选中后，它会将类型密码更改为文本。简单吧？

现在，该行业的一些天才决定，对于其中一个页面，他们希望按钮显示"隐藏密码"。但只为那一页。现在理论上，这很好，但实际情况是，当我在包含"隐藏密码"的页面上时，只有当我"取消选中"复选框时，字段才会从类型文本更改为密码。即我必须点击两次。我该怎么绕过这个？我知道这很简单，但它让我精神错乱。

HTML:

<input type="checkbox" data-toggle-input="js-show-char-toggle" class="ml-small">Hide password
<input type="text" value="" class="js-show-char-toggle">


显示密码

jQuery:

$('input[data-toggle-input]').on('click', function() {
    var $self = $(this),
            inputToggleClass = $self.data('toggle-input'),
            inputType = $self.prop('checked') ? 'text' : 'password';        
        $('.' + inputToggleClass).prop('type', inputType);
    });

如果你试试小提琴，你就会明白我的意思了。如果使用第一个复选框，则当取消选中该复选框时，该字段将仅"隐藏"。第二个效果很好。我做错了什么？

您应该能够在不同的输入中使用它：

$('input[data-toggle-input]').on('click', function () {
    $(this).next().prop('type', $(this).next().prop('type') == 'text' ? 'password' : 'text')
});

jsFiddle示例

您已将布尔逻辑切换为反情况。

$('input[data-toggle-input]').on('click', function() {
        var $self = $(this),
            inputToggleClass = $self.data('toggle-input'),
            inputType = !$self.prop('checked') ? 'text' : 'password';       
        $('.' + inputToggleClass).prop('type', inputType);
    });

如果您添加！为了改变结果，它按预期工作。

相关文章：