7

I am trying to make where if the user clicks on the checkbox, it shows the password in the inputbox as text. And if he/she unchecks, it sets the attribute to password. Any pointers?

Code:

 <!DOCTYPE html>
<html>
<head>
    <script type='text/javascript' src='jquery-3.1.1.min.js'></script>
    <script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>

    <script type='text/javascript'>
        $(document).ready(function(){
            $('#check').click(function(){
                if($('test-input').attr('type', 'text'));
            });
        });
    </script>
</head>

<body>
    <input type='password' id='test-input' /> Show password <input type='checkbox' id='check' />
</body>
</html>
1

6 Answers 6

13

You are missing a # before test-input in the selector and you need to check the state of the checkbox each time you click on it

<script type='text/javascript'>
        $(document).ready(function(){
            $('#check').click(function(){
             alert($(this).is(':checked'));
                $(this).is(':checked') ? $('#test-input').attr('type', 'text') : $('#test-input').attr('type', 'password');
            });
        });
    </script>
1
  • I'll add you as best answer in a few mins
    – BoeNoe
    Commented Sep 27, 2016 at 14:02
11

Do this :

$('#check').click(function(){
    if('password' == $('#test-input').attr('type')){
         $('#test-input').prop('type', 'text');
    }else{
         $('#test-input').prop('type', 'password');
    }
});
0
9

I've made this little snippet:

$('.toggle-password').click(function(){
    $(this).children().toggleClass('mdi-eye-outline mdi-eye-off-outline');
    let input = $(this).prev();
    input.attr('type', input.attr('type') === 'password' ? 'text' : 'password');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.7.95/css/materialdesignicons.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


<div class="form-group col-6">
   <label>Password</label>
   <div class="input-group">
      <input type="password" class="form-control" name="password" autocomplete="new-password" minlength="6">
      <div class="input-group-append toggle-password">
           <span class="input-group-text mdi mdi-eye-outline"></span>
      </div>
   </div>
</div>

It works with jQuery, for styling I've used Bootstrap and the icons are from Material Icons.

1
5

This work correct:

$('#check').click(function(){
	if(document.getElementById('check').checked) {
    $('#test-input').get(0).type = 'text';
  } else {
      $('#test-input').get(0).type = 'password';
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='password' id='test-input' /> Show password <input type='checkbox' id='check' />

JSFIDDLE: https://jsfiddle.net/0xuue3v6/

0
2

Your condition has a missing # for an id. Also that will set the type instead of checking if the type is text or password.

$(document).ready(function() {
  $('#check').click(function() {
    if ($('#test-input').attr('type') == 'text') {
      $('#test-input').attr('type', 'password');
    } else {
      $('#test-input').attr('type', 'text');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type='password' id='test-input' />Show password
<input type='checkbox' id='check' />

5
  • When you click the box it doesn't change the attribute from text to password.
    – BoeNoe
    Commented Sep 27, 2016 at 14:05
  • @BoeNoe yes it does, in the console you can see the actual attribute changing and the text in the input changes from dots to text and back
    – depperm
    Commented Sep 27, 2016 at 14:10
  • It doesnt change from password to text
    – BoeNoe
    Commented Sep 27, 2016 at 14:50
  • what OS and browser are you on? it might be an issue on your end
    – depperm
    Commented Sep 27, 2016 at 14:52
  • windows 7 and chrome.
    – BoeNoe
    Commented Sep 27, 2016 at 14:58
0
$('.pwd-hs-btn').click(function () {
    var next = $(this).next();
    if ('password' == next.attr('type')) {
      next.prop('type', 'text');
    } else {
     next.prop('type', 'password');
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.