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> 

Любая помощь на сокрытие 'пустышку' кнопку отправки, и показывая фактическую кнопку отправки после того, как установлен флажок?

Спасибо!

Answer 1

Используйте классы - you've получил пространство в вашей второй кнопке 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

Ваш код в основном правильно, но вы не имеете его называют на конкретном событии, только когда страница загружается.

Вам просто нужно связать событие с изменением флажка, и, как упоминалось выше, ваш идентификатор недействителен для вашей кнопки отправки.

$(".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) будет скрыть/показать

Примечания: Вы имеют недопустимый идентификатор, разделенный пробелом, на кнопке show-submit

DEMO