密码框显示密码原文时遇到的问题

项目中，需要将密码框显示成密码(星号)或显示成原文字符,由一个复选框来控制

我最开始的思路是，页面一个密码框一个文本框 ，如果要显示密码，则将密码框显示、文本框隐藏，如果要显示原文，则将文本框显示、密码框隐藏

但这有一个问题，复选框是有单机和双击事件的，当不停地快速地点击复选框时，密码框与文本框的切换就会产生问题

在网上找了很多办法，很多都是通过延时触发事件来降低问题产生的概率，但不能从根本解决问题

 

思路2：

if (document.getElementById("showRealPwd").checked) {// 显示原文
   var pwdVal = jQuery("#password").val();
   var cfmPwdVal = jQuery("#confirmPwd").val();
   var pwdCss = jQuery("#password").attr("class");//获取原密码框的样式
   var cfmPwdCss = jQuery("#confirmPwd").attr("class");
   jQuery("#pwdLi").html('<input type="text" class="'+pwdCss+'" id="password" name="userBean.password" value="'+pwdVal+'" />');
   jQuery("#confirmPwdLi").html('<input type="text" class="'+cfmPwdCss+'" id="confirmPwd" name="" value="'+cfmPwdVal+'" />');
  } else {// 显示密码
   var pwdVal = jQuery("#password").val();
   var cfmPwdVal = jQuery("#confirmPwd").val();
   var pwdCss = jQuery("#password").attr("class");
   var cfmPwdCss = jQuery("#confirmPwd").attr("class");
   jQuery("#pwdLi").html('<input type="password" class="'+pwdCss+'"  id="password" name="userBean.password" value="'+pwdVal+'" />');
   jQuery("#confirmPwdLi").html('<input type="password" class="'+cfmPwdCss+'"  id="confirmPwd" name="" value="'+cfmPwdVal+'" />');
  }