先上效果圖吧：
實現原理：
原理很簡單，就是通過對顯示密碼單選框選中狀態的判斷，使用Jquery（或者JS）動態改變密碼輸入框的type爲password或者text。具體的其他樣式可以再添加，但是代碼是不變的。
具體代碼：
<h3>登錄 信息</h3>
<div>
<span>密碼(6-20位以字母開頭只能包含字母、數字、下劃線)<label style="color:red;">*</label> <font id="passwordMSG"></font></span>
<input type="password" name="password" id="password" maxlength="20" required οnblur="checkPwd(this.value)">
</div>
<div>
<span>重複密碼<label style="color:red;">*</label> <font id="mm2MSG"></font></span>
<input form="other" type="password" id="mm2" maxlength="20" required οninput="checkPwd2(this.value)">
</div>
<div class="clear"></div>
<a class="news-letter" href="#">
<label class="checkbox">
<input type="checkbox" οnclick="checkit(this.checked)"><i></i>顯示密碼</label>
</a>可以看到單選框綁定了onclick事件，並將選中狀態（this.checked）傳了過去：
/*顯示密碼*/
function checkit(isChecked) {
if (isChecked) {
$("#password").prop("type", 'text');
$("#mm2").prop("type", 'text');
} else {
$("#password").prop("type", 'password');
$("#mm2").prop("type", 'password');
}
}至此就大功告成了；
最後說一下可能會遇到的坑：prop與attr的選擇
- 對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
- 對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。
