Escrevi um formulário com estes elementos:
<div>
<label for="radio_pessoa_fisica" id="label_cpf_req">
<input name="pessoa" id="radio_pessoa_fisica" type="radio" value="fisica" required>
Pessoa Física
</label>
<label for="radio_pessoa_juridica" id="label_cnpj_req">
<input name="pessoa" id="radio_pessoa_juridica" type="radio" value="juridica" required>
Pessoa Jurídica
</label>
</div>
<div>
<label for="cpf_req">
CPF
<input id="cpf_req" type="text" placeholder="000.000.000-00" required maxlength="14" pattern="([0-9][.-]?){3,11}">
</label>
<label for="cnpj_req" id="label_cnpj_req" >
CNPJ
<input id="cnpj_req" type="text" placeholder="00.000.000/0000-00" required maxlength="18">
</label>
</div>
E lá ao final, antes de fechar o body, a tag <script>
que chama o seguinte código:
function radio_pessoa_change() {
var pfis = document.getElementById("radio_pessoa_fisica").checked;
document.getElementById("label_cpf_req").style.display = pfis ? "block" : "none";
document.getElementById("label_cnpj_req").style.display = pfis ? "none" : "block";
document.getElementById("req_rep").disabled = !pfis;
if (!pfis) {
document.getElementById("req_rep").checked = true
}
}
document.getElementById("radio_pessoa_fisica").addEventListener("change", radio_pessoa_change);
document.getElementById("radio_pessoa_juridica").addEventListener("change", radio_pessoa_change);
document.getElementById("radio_pessoa_fisica").checked = true;
No entanto, quando navego para a página do formulário, o input #radio_pessoa_fisica
é checado pelo script, mas o manipulador de evento não é chamado, e ambos os inputs de texto, #cpf_req
e #cnpj_req
ficam visíveis.
Somente clicando nos inputs rádio na própria página é que a função é chamada e faz o que se espera.
Alguém pode me explicar por que isso acontece, e se possível, me ajudar a obter o efeito desejado (que a function radio_pessoa_change()
seja executada e oculte o input #cnpj_req
Por favor, agradeço se as respostas se ativerem a JavaScript puro.
click
em vez dechange
e altere para:document.getElementById("radio_pessoa_fisica").click();