<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
body {
background: #eee;
}
input {
margin: 2px;
}
</style>
</head>
<body>
<form action="" method="post">
<label for="pass"></label>
<input type="password" name="pass" id="pass"/>
<input type="checkbox" name="check" id="disp" onclick="on()"/>显示密码 <!-- onclick是点击事件，通过执行点击事件，点击到函数on()，来执行对应的on()函数 -->
</form>
<script type="text/javascript">
//通过检测复选框是否选中，修改密码框type应该为password（不显示密码）还是text（显示密码），
function on(){
var disp = document.getElementById('disp'); //查找复选框（通过复选框实现显示密码的功能）
var pass = document.getElementById('pass'); //查找密码框
if(disp.checked){ //if判断是否复选框是否选中，disp为查找到的复选框，checked为检测函数（同时他在html中也是默认选中属性）
pass.type = 'text'; //如果选中，即显示密码，执行修改密码框的type的属性值为text
} else {
pass.type = 'password'; //如果未选中，即不显示密码，执行修改密码框的type的属性值为password
}
}
</script>
</body>
</html>
