密码框眨眼切换密/明文

密码框切换明文/密文的优点这里就不多谈，直接上效果图，以及代码。
效果图：

image.png

image.png

代码：
html：

 <div class="modal fade" id="changePWD" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="margin-top:120px;height:583px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">修改密码</h4>
            </div>
            <div class="modal-body">
                <form class="form form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 col-sm-offset-1 control-label">原密码</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control oldPassword" name="tc_name" value="" /><span class="eyes oldPWD glyphicon glyphicon-eye-close"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 col-sm-offset-1 control-label">新密码</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control newPassword" name="tc_name" value="" /><span class="eyes newPWD glyphicon glyphicon-eye-close"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 col-sm-offset-1 control-label">确认密码</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control confirmPassword" name="tc_name" value="" /><span class="eyes confirmPWD glyphicon glyphicon-eye-close"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-6 col-sm-offset-5">
                            <button type="submit" class="btn btn-blue btn-sure" style="margin-left:35px;">确定</button>
                            <button type="submit" class="btn btn-default btn-cancel">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

js

  $changePWD
            .on("click", ".oldPWD", function () {
                if ($(".oldPassword").attr("type") == "password") {
                    $(".oldPassword").attr("type", "text");
                    $(".oldPWD")
                    .removeClass("glyphicon-eye-close")
                    .addClass("glyphicon-eye-open")
                } else {
                    $(".oldPassword").attr("type", "password");
                    $(".oldPWD")
                    .removeClass("glyphicon-eye-open")
                    .addClass("glyphicon-eye-close")
                }
            })
            .on("click", ".newPWD", function () {
                if ($(".newPassword").attr("type") == "password") {
                    $(".newPassword").attr("type", "text");
                    $(".newPWD")
                    .removeClass("glyphicon-eye-close")
                    .addClass("glyphicon-eye-open")
                } else {
                    $(".newPassword").attr("type", "password");
                    $(".newPWD")
                    .removeClass("glyphicon-eye-open")
                    .addClass("glyphicon-eye-close")
                }
            })
            .on("click", ".confirmPWD", function () {
                if ($(".confirmPassword").attr("type") == "password") {
                    $(".confirmPassword").attr("type", "text");
                    $(".confirmPWD")
                    .removeClass("glyphicon-eye-close")
                    .addClass("glyphicon-eye-open")
                } else {
                    $(".confirmPassword").attr("type", "password");
                    $(".confirmPWD")
                    .removeClass("glyphicon-eye-open")
                    .addClass("glyphicon-eye-close")
                }
            })