3

Ao marcar o chekbox todos os campos devem ser preenchidos com a palavra anônimo e ao desmarcar ele limpa os campos.

Meu html:

<form>
Deseja anonimato?
    <input type="checkbox" id="anonimo">
    
    <input type="text" id="nome" placeholder="seu nome">
    <input type="text" id="email" placeholder="seu email">
    <input type="text" id="telefone" placeholder="seu telefone">
</form>

2
  • há algumas formas de se fazer isso: via for nos campos, aplicar valor diretamente pelo ID, adicionar uma propriedade pra aplicar o valor por esse parametro,...
    – Eloa
    Commented 30/10/2018 às 19:43
  • Pelo ID já seria de bom tamanho. Obrigado pelo feedback.
    – João
    Commented 30/10/2018 às 19:56

5 Respostas 5

5

Um exemplo baseando em ID. Ao clicar no checkbox, ele executa uma função que verifica se está selecionado o checkbox, caso verdadeiro, insere "Anônimo" nos input, caso falso, insere vazio:

function verificarCheckBox() {
    var check = document.getElementById("anonimo");
    
    if (check.checked){ 
       document.getElementById("nome").value = "Anônimo";
       document.getElementById("email").value = "Anônimo";
       document.getElementById("telefone").value = "Anônimo";
    }  else {
       document.getElementById("nome").value = "";
       document.getElementById("email").value = "";
       document.getElementById("telefone").value = "";
    }
}
<form>
Deseja anonimato?
    <input type="checkbox" id="anonimo" onClick="verificarCheckBox()">
    <input type="text" id="nome" placeholder="seu nome">
    <input type="text" id="email" placeholder="seu email">
    <input type="text" id="telefone" placeholder="seu telefone">
</form>

4

Só mais uma forma de se fazer:

$(function() {

    var check = $('#anonimo');
    
    check.on('click', function() {
        if(check.prop('checked') == true) {
          $('#nome,#email,#telefone').val('anônimo');
        } else if(check.prop('checked') == false) {
          $('#nome,#email,#telefone').val('');
        } 
    })

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
Deseja anonimato?
    <input type="checkbox" id="anonimo">
    
    <input type="text" id="nome" placeholder="seu nome">
    <input type="text" id="email" placeholder="seu email">
    <input type="text" id="telefone" placeholder="seu telefone">
</form>

2
  • Sua implementação foi a mais adequada pra mim, Obrigado!
    – João
    Commented 31/10/2018 às 13:19
  • Legal João, abraço!
    – LeAndrade
    Commented 31/10/2018 às 17:52
3

Segue uma sugestão:

<form>
Deseja anonimato?
    <input type="checkbox" id="anonimo">

    <div id="containerInput">
      <input type="text" id="nome" placeholder="seu nome">
      <input type="text" id="email" placeholder="seu email">
      <input type="text" id="telefone" placeholder="seu telefone">
    </div>
</form>

<script>
$('#anonimo').click(function () {
    var texto = this.checked ? 'anonimo' : '';

    $('div[id="containerInput"]').find('input:text').each(function (i, obj) {
    $(obj).val(texto);
  });
});
</script>

JSFIDDLE: https://jsfiddle.net/ofdzwksm/

ou então, de forma simples só com JS e pelo ID como você disse:

<script>
function setaCampos(checado)
{
    var texto = checado ? 'anonimo' : '';

  document.getElementById('nome').value = texto;
  document.getElementById('email').value = texto;
  document.getElementById('telefone').value = texto;
}
</script>

<form>
Deseja anonimato?

    <input type="checkbox" id="anonimo" onchange="setaCampos(this.checked)">


      <input type="text" id="nome" placeholder="seu nome">
      <input type="text" id="email" placeholder="seu email">
      <input type="text" id="telefone" placeholder="seu telefone">

</form>
2
  • Excelente mestre Jedi, a implementação com id foi mais util pois tenho outros campos como rg, cpf, cidade, endereço etc. Dessa maneira posso adicionar mais linhas em var texto. Muito obrigado!'
    – João
    Commented 30/10/2018 às 20:24
  • blza ;) sempre melhor deixar da forma mais generica possivel, assim seu codigo fica mais limpo
    – Eloa
    Commented 30/10/2018 às 20:32
2

Forma um pouco parecida com a do aa_sp porém mais simplificada:

$("#anonimo").on("change", function(){
   $("form :text").val( this.checked ? "anônimo" : "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Deseja anonimato?
    <input type="checkbox" id="anonimo">
    
    <input type="text" id="nome" placeholder="seu nome">
    <input type="text" id="email" placeholder="seu email">
    <input type="text" id="telefone" placeholder="seu telefone">
</form>

O seletor :type vai buscar tudo que for type="text". Mas você pode usar types próprios para cada tipo de input para facilitar a entrada em dispositivos móveis. No caso do email, type="email"; telefone, type="tel"...

Neste caso, você pode usar o seletor input já que o jQuery não reconhece os seletores :email ou :tel:

$("#anonimo").on("change", function(){
   $("form input").not(this).val( this.checked ? "anônimo" : "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Deseja anonimato?
    <input type="checkbox" id="anonimo">
    
    <input type="text" id="nome" placeholder="seu nome">
    <input type="email" id="email" placeholder="seu email">
    <input type="tel" id="telefone" placeholder="seu telefone">
</form>

O .not(this) é para ignorar o checkbox.

Outra forma é adicionando um prefixo comum aos id's dos campos, assim um seletor mais genérico pode ser usado:

$("#anonimo").on("change", function(){
   $("[id^=user_]").val( this.checked ? "anônimo" : "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Deseja anonimato?
    <input type="checkbox" id="anonimo">
    <div>
    <input type="text" id="user_nome" placeholder="seu nome">
    </div>
    <input type="email" id="user_email" placeholder="seu email">
    <input type="tel" id="user_telefone" placeholder="seu telefone">
</form>

O seletor [id^=user_] irá selecionar todos os campos com id's que começam com user_.

Com JavaScript puro

O seletor é o mesmo, só muda a construção:

document.querySelector("#anonimo").onchange = function(){
   var campos = document.querySelectorAll("[id^=user_]");
   for(var x=0; x < campos.length; x++){
      campos[x].value = this.checked ? "anônimo" : "";
   }
}
<form>
Deseja anonimato?
    <input type="checkbox" id="anonimo">
    <div>
    <input type="text" id="user_nome" placeholder="seu nome">
    </div>
    <input type="email" id="user_email" placeholder="seu email">
    <input type="tel" id="user_telefone" placeholder="seu telefone">
</form>

3
  • 1
    Pode fazer a seleção direta tb : $("form :text") e $("form input") . +1, boa resposta Commented 30/10/2018 às 20:34
  • 1
    Verdade, fica até mais simples. Me acostumei com essa sintaxe e esqueço as vezes que da forma que vc sugeriu é mais simples. Valeu!
    – Sam
    Commented 30/10/2018 às 20:39
  • Pô tio, 4 opções? Não dá para dar +4 ups só um mesmo rs;
    – user60252
    Commented 31/10/2018 às 1:30
-1

Fala Pessoal, eu segui as orientações aqui mas no meu caso eu tenho uma tabela com classes bootstrap, e o código javascript só funciona quando eu retiro a classe bootstrap. No caso do meu input checkbox, class="flat".

1
  • aqui é um espaço para respostas, use o espaço dos comentários para dicas ou no seu caso, que imagino ser um pergunta, crie uma pergunta com seu problema! Commented 14/10/2019 às 19:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .