Fill <text> inputs after check <checkbox> and clear when unchecking

Question

When checking chekbox all fields must be filled with the anonymous word and when unchecking it clears the fields.

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

Answer 1

An example based on ID. By clicking on checkbox, it performs a function that checks whether the checkbox, true case, inserts "Anonymous" in input, false case, inserts empty:

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>

Answer 2

Just one more way to do it:

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

Answer 3

Follows a suggestion:

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

or simply just with JS and the ID as you said:

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

Answer 4

Shape somewhat similar to aa_sp but more simplified:

$("#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>

The selector :type go get everything type="text". But you can use your own types for each type of input to make it easier to enter mobile devices. In the case of email, type="email"; telephone, type="tel"...

In this case, you can use the selector input since jQuery does not recognize selectors :email or :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>

The .not(this) is to skip the checkbox.

Another way is to add a common prefix to field id’s, so a more generic selector can be used:

$("#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>

The selector [id^=user_] will select all fields with id’s starting with user_.

With pure Javascript

The selector is the same, only the construction changes:

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>

Answer 5

Speak Folks, I followed the guidelines here but in my case I have a table with bootstrap classes, and the javascript code only works when I remove the bootstrap class. In the case of my input checkbox, class="flat".