Fill in text inputs after checking checkbox and clear when unchecked

Question :

When marking the chekbox all fields must be filled with the anonymous word and 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 :

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>Desejaanonimato?<inputtype="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>

An example based on ID . When clicking on checkbox , it executes a function that checks if checkbox is selected, if true, it inserts “Anonymous” in input , false if it 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>

Here’s 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: link

Or, simply with JS and 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>

Form 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>Desejaanonimato?<inputtype="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 :type selector will fetch everything that is type="text" . But you can use own types for each type of input to facilitate entry into mobile devices. In the case of email, type="email" ; phone, type="tel" …

In this case, you can use the input selector since jQuery does not recognize the :email or :tel selectors:

$("#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>Desejaanonimato?<inputtype="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 ignore the checkbox.

Another way is to add a common prefix to the fields’ 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>Desejaanonimato?<inputtype="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 [id^=user_] selector will select all fields with id’s beginning with user_ .

With pure JavaScript

The selector is the same, it just changes the construct:

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>

Question :

Answer :

With pure JavaScript

Leave a Reply Cancel reply