Question

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

$(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");
              }
            });

以上脚本的Html代码如下。

<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>

请告诉我如何解决此问题。提前谢谢。

Answer 1

您无需隐藏“div＃save_password”并在复选框上使用更改事件而非点击。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

试试这个

$(".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"); 
}

});

第一次无法在复选框点击事件中隐藏和显示元素

2 个答案: