I am trying to change input type to text from password when I click the "Show password" checkbox.
This what I have written. Is it correct?
<script src=".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 passwordI am trying to change input type to text from password when I click the "Show password" checkbox.
This what I have written. Is it correct?
<script src="https://ajax.googleapis./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 password5 Answers
Reset to default 6In pure javascript you can do like this,
getElementsByClassName('password') will give you collection of nodes. You have to iterate it and apply the changes to each.
forEach() can not applied to collection, so Array.from(...) used here to create array from the node collection.
function doSomething(isChecked) {
var type = isChecked ? 'text' : 'password';
Array.from(document.getElementsByClassName('password')).forEach(element => {
element.type = type;
});
}<script src="https://ajax.googleapis./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
$(function(){
$("#check").on("change", function(){
if($(this).prop('checked')){
$(".password").attr("type", "text");
} else {
$(".password").attr("type", "password");
}
})
})<script src="https://ajax.googleapis./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 passwordYou need to provide id to the checkbox and on the change event, it checks if the checkbox is checked or not, if yes then it will make the .password class field input to text otherwise it will be password
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
Password: <input type="password" value="FakePSW" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password<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>
A one line solution, you could use a ternary operator:
$("#check").on("change", function(){
$(this).is(":checked") ? $(".password").attr("type", "text") : $(".password").attr("type", "password");
})<script src="https://ajax.googleapis./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