Show or hide text in password field using checkbox change event



Password
Show text


  • Video Tutorial on show hide text in password field


JQuery

<script>
$(document).ready(function() {
/// Checkbox change event ///
$("#ckb").change(function(){
var ckb_status = $("#ckb").prop('checked');
 if(ckb_status){$('#t1').prop('type', 'text');}// if checked
 else{$('#t1').prop('type', 'password');} // if not checked 
});
///End of checkbox change event//
});
</script>

HTML

Password  
<input type=password name=t1 id=t1 class='form-control'>
<input type=checkbox id='ckb'> Show text

Using JavaScript

Add my_change() function to onclick event of checkbox .
<input type=checkbox id='ckb' onclick=my_change()>
Use this JavaScript code.
<script>
function my_change() {
var t = document.getElementById("t1");
  if (t.type === "password") {
    t.type = "text";
  } else {
    t.type = "password";
  }
}
</script>
Checkbox
Textbox Managing Buttons ListBox Radio Button


plus2net.com









Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element


JQuery Video Tutorials




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer