Question

当我点击＆＃34;显示密码＆＃34时，我正尝试将输入类型从text更改为password;复选框。

这就是我写的。这是对的吗？

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" class="password"/>
<input type="password" class="password"/>
<input type="checkbox" onchange="document.getElementsByClassName('password').type = this.checked ? 'text' : 'password'"> Show password

＆＃13;

Answer 1

在纯JavaScript中你可以这样做， getElementsByClassName('password')将为您提供节点集合。您必须迭代它并将更改应用于每个。

forEach()无法应用于集合，因此Array.from(...)用于从节点集创建数组。

function doSomething(isChecked) {
  var type = isChecked ? 'text' : 'password';
  Array.from(document.getElementsByClassName('password')).forEach(element => {
    element.type = type;
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" class="password"/>
<input type="password" class="password"/>
<input type="checkbox" onchange="doSomething(this.checked)"> Show password

Answer 2

＆＃13;

function myFunction() {
    var x = document.getElementById("myInput");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
}

＆＃13;

   



Password: <input type="password" value="FakePSW" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password

＆＃13;

Answer 3

$(function(){
    $("#check").on("change", function(){
        if($(this).prop('checked')){
            $(".password").attr("type", "text");
        } else {
            $(".password").attr("type", "password");
        }
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" class="password"/>
<input type="password" class="password"/>
<input type="checkbox" id='check'> Show password

你只需要在复选框中提供id然后在更改事件上，它会检查是否选中了复选框，如果是，那么它将使.password类字段输入到文本，否则它将是密码< / p>

Answer 4

<html>
    <body>
        <form name="myform">
           <input type="text" name="txt" />
           <input type="checkbox" name="option" value='1' onchange="changeType()" />
        </form>
        <script>
            function changeType()
            {
                document.myform.txt.type=(document.myform.option.value=(document.myform.option.value==1)?'-1':'1')=='1'?'text':'password';
            }
        </script>
    </body>
</html>

Answer 5

单线解决方案，您可以使用三元运算符：

$("#check").on("change", function(){
    $(this).is(":checked") ? $(".password").attr("type", "text") : $(".password").attr("type", "password");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" class="password" value="my"/>
<input type="password" class="password" value="password?"/><br><br>
<input type="checkbox" id='check'> Show password

选中复选框后更改输入类型

5 个答案: