原理是建立2个input，一个type是text，一个type是password。在点击按钮时，这两input个的显示状态与val（）的值在切换。
html：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>案例测试</title> 6 <link rel="stylesheet" href="css/all.css" /> 7 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 8 <script type="text/javascript" src="js/all.js"></script> 9 10 </head> 11 12 <body> 13 <!-- 密码的显示与隐藏 --> 14 <div class="code"> 15 <span>密码：</span><input type="password" /><input type="text" class="hide" /><a>SHOW</a> 16 </div> 17 <!-- End 密码的显示与隐藏 --> 18 </body> 19 20 </html>
css：
1 /* 公共样式 */ 2 * { padding: 0; margin: 0; list-style: none; } 3 .hide { display: none; } 4 5 6 /* 密码的显示与隐藏 */ 7 .code { margin: 50px 0 0 100px; } 8 .code input { margin: 0 10px; padding: 10px 0 10px 10px; height: 20px; line-height: 20px; } 9 .code a { display: inline-block; padding: 0 14px; line-height: 30px; background: #ddf; cursor: pointer; }
js：
1 $(function(){ 2 //密码的显示与隐藏 3 //alert('lll'); 4 $('.code a').on('click',function(){ 5 if($(this).html() == 'SHOW'){ 6 $(this).html('HIDE') 7 .siblings('input[type=text]').css('display','inline-block') 8 .siblings('input[type=password]').css('display','none') 9 ; 10 $(this).siblings('input[type=text]').val($(this).siblings('input[type=password]').val()); 11 }else{ 12 $(this).html('SHOW') 13 .siblings('input[type=text]').css('display','none') 14 .siblings('input[type=password]').css('display','inline-block') 15 ; 16 $(this).siblings('input[type=password]').val($(this).siblings('input[type=text]').val()); 17 18 } 19 20 21 }) 22 23 })
js也可以换成下面的代码，只不过是换了一个函数：当a被点击时，在两个function之间进行切换。
1 $('.code a').toggle(function(){ 2 $(this).html('HIDE') 3 .siblings('input[type=text]').css('display','inline-block') 4 .siblings('input[type=password]').css('display','none') 5 ; 6 $(this).siblings('input[type=text]').val($(this).siblings('input[type=password]').val()); 7 },function(){ 8 $(this).html('SHOW') 9 .siblings('input[type=text]').css('display','none') 10 .siblings('input[type=password]').css('display','inline-block') 11 ; 12 $(this).siblings('input[type=password]').val($(this).siblings('input[type=text]').val()); 13 })