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

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>

关于隐藏 'dummy' 提交按钮并在选中复选框后显示实际提交按钮的任何帮助？

谢谢！

Answer 1

使用类--您的第二个按钮 ID 中有一个 space：

<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 对于您的提交按钮无效。

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

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

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) 将 hide/show

注意：show-submit 按钮上的 space 分隔 ID 无效

DEMO

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

jQuery to hide dummy button and show submit button

jquery

show

hide