Estou trabalhando em uns projetos do meu curso e consegui desenvolver até mais ou menos essa parte, tem alguma outra maneira de eliminar essas inúmeras linhas de códigos mantendo a mesma função?(a função seria Manter o conteúdo da textarea oculto até que o check-box seja selecionado e manter ele apenas legível) Pois assim deixaria meu código um pouco menor e mais fácil de entender também.
Até o momento utilizei bastante o elemento document.getElementById
e consegui entender até que de uma maneira fácil o seu funcionamento.
function consulta1() {
if (document.getElementById('checkBA').checked) {
document.getElementById('consT').value = "R$ 75,00";
document.getElementById('consT').disabled = true;
} else {
document.getElementById('consT').value = "";
document.getElementById("consT").readOnly = true;
document.getElementById('consT').disabled = false;
}
}
function consulta2() {
if (document.getElementById('checkBB').checked) {
document.getElementById('interT').value = "R$ 510,00";
document.getElementById('interT').disabled = true;
} else {
document.getElementById('interT').value = "";
document.getElementById("interT").readOnly = true;
document.getElementById('interT').disabled = false;
}
}
function consulta3() {
if (document.getElementById('checkBC').checked) {
document.getElementById('examT').value = "R$ 150,00";
document.getElementById('examT').disabled = true;
} else {
document.getElementById('examT').value = "";
document.getElementById("examT").readOnly = true;
document.getElementById('examT').disabled = false;
}
}
<form><fieldset><legend><font color="darkblue">Serviços</font></legend><br>
<table width="80%" border="0" style= "border-color: Gainsboro" cellpadding="10">
<tr>
<td>
<input type="checkbox" name="servico1" id="checkBA" onclick='consulta1()'; >
Consulta <td><input type="text" id="consT" size="20" maxlength="35"readonly/></td>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="servico2" id="checkBB" onclick='consulta2()'; />
Internação <td><input type="text" id="interT" size="20" maxlength="35" readonly/></td>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="servico3" id="checkBC" onclick='consulta3()'; />
Exames Laboratoriais <td><input type="text" id="examT" size="20" maxlength="35" readonly /></td>
</td>
</tr>
</table><br>
</fieldset> </form>