Preciso fazer uma condicional para quando o usuário clica no checkbox, apareça o botão

[powerinformatica]

Boa tarde mestres! Preciso que quando o usuário clica no checkbox, automaticamente apareça o botão de assinar.

Atualmente, estou utilizando este código, más não está dando certo. Se alguém puder me ajudar, agradeço!

<form action="#">
  <div>
    <input type="checkbox" id = "semestral" nome = "subscribe" value = "semestral">
    <label for="semestral"> Você concorda com todas as informações desta página? </ label>
  </ div>

<?php 
if(isset($_POST['semestral']))
{ ?>
<div>
<button type="submit"> ASSINAR</ button>
</ div>
<?php
}
?>
</ form>

 

Editado Março 11, 2021 por powerinformatica

[Alyson Ronnan Martins]

Eu recomendaria usar o Javascript para fazer essa ação em tempo real.

Primeiro defini um css que "esconda" o botão e adicionei a classe ao botão:

.btHidden{
  display: none;
}

<div>
	<button type="submit" class="btHidden">ASSINAR</ button>
</ div>

Agora que o botão não esta aparecendo eu criei um javascript que vai tirar ou colocar a classe:

<script>
	// Selecione o elemento checkbox
	var $ckLiberar = document.querySelector('input#semestral');

	// adciona o evento ao clicar nele
	$ckLiberar.addEventListener('click', function(event){
		// selecione o elemento botão
		var divButton = document.querySelector('button')

		// remove ou adciona a classe btHidden
		divButton.classList.toggle('btHidden');

		
	});
	
</script>

Olha se consegue adaptar no seu projeto.

[powerinformatica]

8 horas atrás, Alyson Ronnan Martins disse:

Eu recomendaria usar o Javascript para fazer essa ação em tempo real.

Primeiro defini um css que "esconda" o botão e adicionei a classe ao botão:

.btHidden{
  display: none;
}

<div>
	<button type="submit" class="btHidden">ASSINAR</ button>
</ div>

Agora que o botão não esta aparecendo eu criei um javascript que vai tirar ou colocar a classe:

<script>
	// Selecione o elemento checkbox
	var $ckLiberar = document.querySelector('input#semestral');

	// adciona o evento ao clicar nele
	$ckLiberar.addEventListener('click', function(event){
		// selecione o elemento botão
		var divButton = document.querySelector('button')

		// remove ou adciona a classe btHidden
		divButton.classList.toggle('btHidden');

		
	});
	
</script>

Olha se consegue adaptar no seu projeto.

Bom dia amigo... primeiramente gratidão total por ter me ajudado.... então, fiz este código que você me passou, e funcionou quase perfeitamente... na real, ele está funcionando só que ao contrário.. 

Quando NÃO está clicado, ele aparece o botão, porém quando clica DESAPARECE.... isso já é quase tudo o que eu queria...

Vou te mostrar o código como eu deixei. Certamente é alguma "caca" que eu fiz e não estou sabendo desfazer:

<style type="text/css">
.btHidden{
  display: none;
}

</style>

<form action="#">
  <div>
    <input type="checkbox" id="semestral" nome="semestral" value = "semestral" >
    <label for="semestral"> Você concorda com todas as informações desta página? </ label>
  </div>
  <div>
	<button type="submit">ASSINAR</button>
</div>

  
<script>
	// Selecione o elemento checkbox
	var $ckLiberar = document.querySelector('input#semestral');

	// adciona o evento ao clicar nele
	$ckLiberar.addEventListener('click', function(event){
		// selecione o elemento botão
		var divButton = document.querySelector('button')

		// remove ou adciona a classe btHidden
		divButton.classList.toggle('btHidden');

		
	});
	
</script>

</ form>

 

[Alyson Ronnan Martins]

Bom dia @powerinformatica

Faltou colocar a classe css no botão para que ele fique oculto na hora que a pagina carregar.

	<button type="submit" class="btHidden">ASSINAR</button>
</div>

Isso vai fazer esconder o botão quando a pagina carregar e se marcar a checkbox vai mostrar 

[powerinformatica]

18 minutos atrás, Alyson Ronnan Martins disse:

Bom dia @powerinformatica

Faltou colocar a classe css no botão para que ele fique oculto na hora que a pagina carregar.

	<button type="submit" class="btHidden">ASSINAR</button>
</div>

Isso vai fazer esconder o botão quando a pagina carregar e se marcar a checkbox vai mostrar 

Funcionooou... gratidão por tudo!