Javascript 首次无法隐藏和显示复选框单击事件上的元素

我试图根据复选框的选中条件显示和隐藏复选框单击事件。但这是第一次无法显示和隐藏元素。当单击事件发生时，相同的脚本第二次起作用。剧本如下

$(document).on("click", ".check-now-checkbox", function() {
              if($(this).prop('checked')===true){
               $("#Password").show();
                  $("#save_password").show();
                        $("#Role").removeClass("show-pwd");
                    }
              else{
                  $("#Password").hide()
                  $("#save_password").hide();

                        $("#Role").addClass("show-pwd");
              }
            });

<div class="password"><div class="row server-inputs" id="Password">
<div class="input-field col s12">
<input id="password" type="password" class="validate" required="" aria-required="true" name="password" maxlength="255" value="">
<label name="password" data-error="This field is required" data-success="" for="Password">Password</label>
</div>
</div></div>
<div class="save_password"><div class="row server-inputs" id="save_password">
<div class="input-field col s12">
<input type="checkbox" class="filled-in check-now-checkbox" name="save_password" id="Save password?" checked="checked" style="cursor:pointer">
<label for="Save password?" style="margin-top: -35px;cursor: pointer;">Save password?</label>
</div>
</div></div>

上述脚本的Html代码如下所示

$(document).on("click", ".check-now-checkbox", function() {
              if($(this).prop('checked')===true){
               $("#Password").show();
                  $("#save_password").show();
                        $("#Role").removeClass("show-pwd");
                    }
              else{
                  $("#Password").hide()
                  $("#save_password").hide();

                        $("#Role").addClass("show-pwd");
              }
            });

<div class="password"><div class="row server-inputs" id="Password">
<div class="input-field col s12">
<input id="password" type="password" class="validate" required="" aria-required="true" name="password" maxlength="255" value="">
<label name="password" data-error="This field is required" data-success="" for="Password">Password</label>
</div>
</div></div>
<div class="save_password"><div class="row server-inputs" id="save_password">
<div class="input-field col s12">
<input type="checkbox" class="filled-in check-now-checkbox" name="save_password" id="Save password?" checked="checked" style="cursor:pointer">
<label for="Save password?" style="margin-top: -35px;cursor: pointer;">Save password?</label>
</div>
</div></div>

密码
保存密码？

请让我知道如何解决这个问题。提前感谢。

您不需要隐藏“div#save_password”并使用复选框上的更改事件，而只需单击

$（document）.on（“更改”，“立即选中复选框”，函数（））{
if（$（this）.prop（'checked'）==true）{
$（“#密码”）.show（）；
$（“#角色”）.removeClass（“show pwd”）；
}
否则{
$（“#密码”）.hide（）
$（“#角色”）.addClass（“显示pwd”）；
}
});

密码
保存密码？
试试这个

$(".check-now-checkbox").click(function(){
    If($(this).is(":checked")){
        $("#Password").show(); 
        $("#save_password").show(); 
        $("#Role").removeClass("show-pwd"); 
    }
else{
      $("#Password").hide() 
      $("#save_password").hide(); 
      $("#Role").addClass("show-pwd"); 
}

});