JavaScript多密码输入框独立显示/隐藏功能异常修复

出现全量同步切换的问题来自两处代码错误：

• showPassword函数逻辑写死了同时选中三个密码输入框，只要函数触发就会无差别修改所有输入框的显示状态，没有区分当前点击的是哪个切换控件
• 三个切换复选框重复使用了同一个idtogglePw，HTML规范要求页面内id必须唯一，重复id会导致标签关联、元素选择逻辑异常

• HTML层：给每个切换复选框分配唯一id，同步修改对应label的for属性值匹配id，给所有切换复选框加统一的功能类名，方便样式绑定
• CSS层：把原来绑定id的切换样式改成绑定类名，适配多个切换控件的场景
• JS层：重写切换逻辑，点击时只操作当前复选框对应的相邻密码输入框，不再全局获取所有密码框修改状态

JavaScript代码 #

function showPassword(trigger) {
  // 获取当前点击的复选框前面紧邻的密码输入框
  const pwdInput = trigger.previousElementSibling;
  // 仅修改当前关联输入框的显示状态
  pwdInput.type = trigger.checked ? "text" : "password";
}

CSS代码 #

label.t2 {
    font-size: 14px!important;
    line-height: 1.5em!important;
    font-weight: 500!important;
    margin-bottom: 6px!important;
    display: block;
}

/* 切换密码显示状态样式，改用类选择器适配多控件 */
.toggle-pw { display: none; }
.toggle-pw + label:before { content: "\f06e"; }
.toggle-pw:checked + label:before { content: "\f070"; }

HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

<p class="">
    <label class="t2" for="password_current">Current Password</label>
    <input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/>
    <input type="checkbox" id="togglePw_current" class="toggle-pw" onclick="showPassword(this)"/>
    <label for="togglePw_current" class="fa"></label>
</p>

<p class="">
    <label class="t2" for="password_1">New Password</label>
    <input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" />
    <input type="checkbox" id="togglePw_1" class="toggle-pw" onclick="showPassword(this)"/>
    <label for="togglePw_1" class="fa"></label>
</p>

<p class="">
    <label class="t2" for="password_2">Repeat New Password</label>
    <input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" />
    <input type="checkbox" id="togglePw_2" class="toggle-pw" onclick="showPassword(this)"/>
    <label for="togglePw_2" class="fa"></label>
</p>

• 给onclick传入this参数，就能在函数里直接拿到当前触发点击的复选框DOM元素，不用再通过id硬编码查找
• 利用DOM节点的兄弟关系，直接取复选框前面紧邻的元素就是对应的密码输入框，不需要写死每个输入框的id，后续再加密码输入框只要保持结构一致，不用修改JS逻辑就能直接使用
• 复选框的checked属性本身就是布尔值，勾选时为true（对应明文显示text类型），未勾选为false（对应密文显示password类型），可以直接用三元判断简化代码，不用写重复的if/else分支

内容的提问来源于stack exchange，提问作者Snorlax