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