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>