Skip to main content
adicionou 1546 caracteres ao conteúdo
Fonte Link
Isac
  • 25,5mil
  • 3
  • 31
  • 51
function consulta(checkId, inputId, valor) {
  const input = document.getElementById(inputId);

  if (document.getElementById(checkId).checked) {
    input.value = valor;
    input.disabled = true;
  } else {
    input.value = "";
    input.readOnly = true;
    input.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='consulta("checkBA","consT","R$ 75,00")' ;> Consulta
          <td><input type="text" id="consT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico2" id="checkBB" onclick='consulta("checkBB","interT","R$ 510,00")' ; /> Internação
          <td><input type="text" id="interT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico3" id="checkBC" onclick='consulta("checkBC","examT","R$ 150,00")' ; /> Exames Laboratoriais
          <td><input type="text" id="examT" size="20" maxlength="35" readonly /></td>
      </tr>
    </table><br>
  </fieldset>
</form>

Utilizando operadores ternários e dupla atribuição dá para compactar bastante mais:

function consulta(check, inputId, valor) {
  const input = document.getElementById(inputId);
  input.value = check.checked ? valor : "";
  input.readOnly = input.disabled = check.checked;
}
<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='consulta(this,"consT","R$ 75,00")' ;> Consulta
          <td><input type="text" id="consT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico2" id="checkBB" onclick='consulta(this,"interT","R$ 510,00")' ; /> Internação
          <td><input type="text" id="interT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico3" id="checkBC" onclick='consulta(this,"examT","R$ 150,00")' ; /> Exames Laboratoriais
          <td><input type="text" id="examT" size="20" maxlength="35" readonly /></td>
      </tr>
    </table><br>
  </fieldset>
</form>

function consulta(checkId, inputId, valor) {
  const input = document.getElementById(inputId);

  if (document.getElementById(checkId).checked) {
    input.value = valor;
    input.disabled = true;
  } else {
    input.value = "";
    input.readOnly = true;
    input.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='consulta("checkBA","consT","R$ 75,00")' ;> Consulta
          <td><input type="text" id="consT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico2" id="checkBB" onclick='consulta("checkBB","interT","R$ 510,00")' ; /> Internação
          <td><input type="text" id="interT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico3" id="checkBC" onclick='consulta("checkBC","examT","R$ 150,00")' ; /> Exames Laboratoriais
          <td><input type="text" id="examT" size="20" maxlength="35" readonly /></td>
      </tr>
    </table><br>
  </fieldset>
</form>
function consulta(checkId, inputId, valor) {
  const input = document.getElementById(inputId);

  if (document.getElementById(checkId).checked) {
    input.value = valor;
    input.disabled = true;
  } else {
    input.value = "";
    input.readOnly = true;
    input.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='consulta("checkBA","consT","R$ 75,00")' ;> Consulta
          <td><input type="text" id="consT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico2" id="checkBB" onclick='consulta("checkBB","interT","R$ 510,00")' ; /> Internação
          <td><input type="text" id="interT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico3" id="checkBC" onclick='consulta("checkBC","examT","R$ 150,00")' ; /> Exames Laboratoriais
          <td><input type="text" id="examT" size="20" maxlength="35" readonly /></td>
      </tr>
    </table><br>
  </fieldset>
</form>

Utilizando operadores ternários e dupla atribuição dá para compactar bastante mais:

function consulta(check, inputId, valor) {
  const input = document.getElementById(inputId);
  input.value = check.checked ? valor : "";
  input.readOnly = input.disabled = check.checked;
}
<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='consulta(this,"consT","R$ 75,00")' ;> Consulta
          <td><input type="text" id="consT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico2" id="checkBB" onclick='consulta(this,"interT","R$ 510,00")' ; /> Internação
          <td><input type="text" id="interT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico3" id="checkBC" onclick='consulta(this,"examT","R$ 150,00")' ; /> Exames Laboratoriais
          <td><input type="text" id="examT" size="20" maxlength="35" readonly /></td>
      </tr>
    </table><br>
  </fieldset>
</form>

removeu 55 caracteres do conteúdo
Fonte Link
Isac
  • 25,5mil
  • 3
  • 31
  • 51

Uma das formas de reduzir bastante é guardar os elementos trazidos pelo getElementById em variáveis fora das funções e apenas utiliza-las dentro das funções. Isto também pode tornar o seu código mais eficiente pois não está constantemente a navegar pelo html para obter os mesmos elementos. Pode não dar para fazer desta maneira se o html for atualizado dinamicamente.

A lógica que está a aplicar a cada checkcheck é igual mudando apenas o input<input> e o valor, o que lhe permite generalizar o código se receber os 3 elementos que mudam.

Que são os que mudam para cada opção. Também tinhas uns quantos </td> sobrando que retirei.

Pode ainda simplificar ainda mais trocandose trocar o primeiro elementoparâmetro por this no onclick do html:

Que faz com que já receba o elemento na função, não sendo necessário fazer o document.getElementById:

Uma das formas de reduzir bastante é guardar os elementos trazidos pelo getElementById em variáveis e apenas utiliza-las dentro das funções. Isto também pode tornar o seu código mais eficiente pois não está constantemente a navegar pelo html para obter os mesmos elementos. Pode não dar para fazer desta maneira se o html for atualizado dinamicamente.

A lógica que está a aplicar a cada check é igual mudando apenas o input e o valor, o que lhe permite generalizar o código se receber os 3 elementos que mudam.

Que são os que mudam para cada opção. Também tinhas uns quantos </td> sobrando que retirei.

Pode ainda simplificar mais trocando o primeiro elemento por this no onclick do html:

Que faz com que já receba o elemento na função não sendo necessário fazer o document.getElementById:

Uma das formas de reduzir bastante é guardar os elementos trazidos pelo getElementById em variáveis fora das funções e apenas utiliza-las dentro das funções. Isto também pode tornar o seu código mais eficiente pois não está constantemente a navegar pelo html para obter os mesmos elementos. Pode não dar para fazer desta maneira se o html for atualizado dinamicamente.

A lógica que está a aplicar a cada check é igual mudando apenas o <input> e o valor, o que lhe permite generalizar o código se receber os 3 elementos que mudam.

Que são os que mudam para cada opção.

Pode simplificar ainda mais se trocar o primeiro parâmetro por this no onclick do html:

Que faz com que já receba o elemento na função, não sendo necessário fazer o document.getElementById:

Fonte Link
Isac
  • 25,5mil
  • 3
  • 31
  • 51

Uma das formas de reduzir bastante é guardar os elementos trazidos pelo getElementById em variáveis e apenas utiliza-las dentro das funções. Isto também pode tornar o seu código mais eficiente pois não está constantemente a navegar pelo html para obter os mesmos elementos. Pode não dar para fazer desta maneira se o html for atualizado dinamicamente.

A lógica que está a aplicar a cada check é igual mudando apenas o input e o valor, o que lhe permite generalizar o código se receber os 3 elementos que mudam.

Exemplo:

function consulta(checkId, inputId, valor) {
  const input = document.getElementById(inputId);

  if (document.getElementById(checkId).checked) {
    input.value = valor;
    input.disabled = true;
  } else {
    input.value = "";
    input.readOnly = true;
    input.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='consulta("checkBA","consT","R$ 75,00")' ;> Consulta
          <td><input type="text" id="consT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico2" id="checkBB" onclick='consulta("checkBB","interT","R$ 510,00")' ; /> Internação
          <td><input type="text" id="interT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico3" id="checkBC" onclick='consulta("checkBC","examT","R$ 150,00")' ; /> Exames Laboratoriais
          <td><input type="text" id="examT" size="20" maxlength="35" readonly /></td>
      </tr>
    </table><br>
  </fieldset>
</form>

Tive que alterar o onclick de cadca elemento para enviar para a função os 3 parametros:

onclick='consulta("checkBA","consT","R$ 75,00")'

Que são os que mudam para cada opção. Também tinhas uns quantos </td> sobrando que retirei.

Pode ainda simplificar mais trocando o primeiro elemento por this no onclick do html:

onclick='consulta(this,"consT","R$ 75,00")'

Que faz com que já receba o elemento na função não sendo necessário fazer o document.getElementById:

function consulta(check, inputId, valor) {
  const input = document.getElementById(inputId);

  if (check.checked) { //check já é o elemento e não precisa de getElementById
    input.value = valor;
    input.disabled = true;
  } else {
    input.value = "";
    input.readOnly = true;
    input.disabled = false;
  }
}