Question

我有这个js（jQuery）：

<script type="text/javascript">    
    if ($('input.checkbox_check').is(':checked')) {
        $('#hide-temp-submit').hide();
        $('#show-submit').show();
    }
</script>

这个HTML：

<input type="checkbox" class="checkbox_check" name="" value="">
<button class="login_button" id='hide-temp-submit' style="background-color:#101010;color:grey;">Please Agree to Terms</button>
<button class="login_button" id='create_button show-submit' style="display:none">Create Account</button>

任何有关隐藏＆＃39;虚拟＆＃39;的帮助提交按钮，并在选中复选框后显示实际提交按钮？

谢谢！

Answer 1

使用课程 - 您的第二个按钮ID中有空格：

<script type="text/javascript">    
    if ($('input.checkbox_check').is(':checked')) {
        $('.hide-temp-submit').hide();
        $('.show-submit').show();
    }
</script>

HTML：

 <input type="checkbox" class="checkbox_check" name="" value="">
 <button class="login_button hide-temp-submit"  style="background-color:#101010;color:grey;">Please Agree to Terms</button>
 <button class="login_button create_button show-submit"  style="display:none">Create Account</button>

Answer 2

您的代码大部分都是正确的，但只有在页面加载时才会调用特定事件。

您只需将事件连接到复选框更改，如上所述，您的ID对于提交按钮无效。

＆＃13;

$(".checkbox_check").on("change", function() {
  if ($('input.checkbox_check').is(':checked')) {
    $('#hide-temp-submit').hide();
    $('#show-submit').show();
  } else {
    $('#hide-temp-submit').show();
    $('#show-submit').hide();    
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox_check" name="" value="">
<button class="login_button" id='hide-temp-submit' style="background-color:#101010;color:grey;">Please Agree to Terms</button>
<button class="login_button" id='show-submit' style="display:none">Create Account</button>

＆＃13;

Answer 3

您的代码仅在页面加载时运行，您需要一个事件处理程序来管理用户输入

$(function(){    
    $('input.checkbox_check').change(function(){
        $('#hide-temp-submit').toggle(!this.checked);
        $('#show-submit').toggle(this.checked);
    }).change(); // trigger event on page load (if applicable)   
});

toggle( boolean)将隐藏/显示

注意：show-submit按钮

上的空格分隔ID无效

的 DEMO

jQuery隐藏虚拟按钮并显示提交按钮

3 个答案: