<!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>