Change checkbox value from radio

Asked

Viewed 237 times

0

I wish that when it was selected "brother" in the radio the value of checkboxes fold.

function soma_valores(campo) {
  if (campo.checked) {
    var valor_anterior = parseFloat(document.getElementById("Preco").value);
    var valor_novo = valor_anterior + parseFloat(campo.value);
    document.getElementById("Preco").value = valor_novo;

  } else {
    var valor_anterior = document.getElementById("Preco").value;
    var valor_novo = valor_anterior - campo.value;
    document.getElementById("Preco").value = valor_novo;
  }
}

$(function() {
  var documentType = $('#documentType2');
  documentType.hide();

  function showInput(id) {
    if (id == 'irmao' || id == 'Dois_Cursos') {
      $('#documentType2 label').text('90.00');
      $('#documentType2 input').prop('Preco');
      $('#Preco').val('90.00');
      documentType.show();
    }
    if (id == 'Bolsista') {
      $('#documentType2 label').text('R$ 00.00');
      $('#documentType2 input').prop('Preco');
      $('#Matricula').val('30.00');
      $('#Preco').val('00.00');
      documentType.show();
    }
    if (id == 'Nenhum') {
      $('#documentType2 label').text('60.00');
      $('#documentType2 input').prop('Preco');
      $('#Matricula').val('30.00');
      $('#Preco').val('60.00');
      documentType.show();
    }

  }
  $(document).on('click', 'input[type=radio]', function() {
    var id = $(this).prop('id');
    showInput(id);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="campo">
  <div class="exemplo-radio">
    <fieldset>
      <legend>Selecione o tipo de pacote
        <font color="red">*</font>
      </legend>
      <label><input type="radio" name="Tipo_Desconto" id="irmao" value="Irmão" required> Irmão</label>
      <label><input type="radio" name="Tipo_Desconto" id="Bolsista" value="Bolsista" required> Bolsista</label>
      <label><input type="radio" name="Tipo_Desconto" id="Dois_Cursos" value="Dois cursos" required>2 cursos</label>
      <label><input type="radio" name="Tipo_Desconto" id="Nenhum" value="Nenhum" required>1 curso</label>
    </fieldset>
  </div>
</div>
<div class="campo">
  <fieldset>
    <legend>Adicional</legend>
    <label class="container">Matrícula<input class='shared'  type='checkbox' value='30.00' id='Matricula' name='Matricula' onclick='soma_valores(this)'/><span class="checkmark"></span></label>
    <label class="container">Figurino<input class='shared' type='checkbox' value='50.00' id='Figurino' name='Figurino' onclick='soma_valores(this)'/><span class="checkmark"></span></label>
  </fieldset>
</div>
<div id="documentType2">
  <legend>Valor</legend>
  <input type='text' autocomplete='off' value='0.00' id='Preco' name='Preco' readonly pattern='^[A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÊÍÏÓÒÖÚÇÑ ]+$' maxlength='500' />

javascript jquery checkbox radiobutton
  • 3

    I haven’t looked at everything, but id == 'irmao' || 'Dois_Cursos' is wrong. It should be id == 'irmao' || id == 'Dois_Cursos'. You can improve that great amount of ifs using the switch/case.

  • I appreciate the tip, although it has nothing to do with my doubt.

  • 1

    The first part yes, as it is wrong can interfere with the result.

1 answer

0


There must be better solutions, but what I got was this:

function soma_valores(campo)
{
   if(campo.checked)
   {
       var valor_anterior = parseFloat(document.getElementById("Preco").value);
       var valor_novo = valor_anterior + parseFloat(campo.value);
       document.getElementById("Preco").value = valor_novo;

   }
   else
   {
       var valor_anterior = document.getElementById("Preco").value;
       var valor_novo = valor_anterior-campo.value;
       document.getElementById("Preco").value = valor_novo;
   }
}
//exibir label preço desconto
$(function() {
    var documentType = $('#documentType2');
    documentType.hide();
    function showInput(id) {
        if(id == 'irmao' || id == 'Dois_Cursos') {
            $('#documentType2 label').text('90.00');
            $('#documentType2 input').prop('Preco');
            $('#Preco').val('90.00');
            documentType.show();
        }
        if(id == 'Bolsista') {
          $('#documentType2 label').text('0.00');
          $('#documentType2 input').prop('Preco');
          $('#Matricula').val('30.00'); 
            $('#Preco').val('00.00');
            documentType.show();
        }
        if(id == 'Nenhum') {
          $('#documentType2 label').text('60.00');
          $('#documentType2 input').prop('Preco');
          $('#Matricula').val('30.00');
            $('#Preco').val('60.00');
            documentType.show();
        }

    }
    $(document).on('click', 'input[type=radio]', function(){
        var id = $(this).prop('id');
        showInput(id);
    });
});
$(function() {
    var documentType = $('#documentType3');
    documentType.hide();
    function showInput(id) {
        if(id == 'irmao') {
            $('#Matricula').val('60.00');
            $('#Figurino').val('100.00');
            documentType.show();
        }
        else
        {
          $('#Matricula').val('30.00');
            $('#Figurino').val('50.00');
            documentType.show();
        }
    }
    $(document).on('click', 'input[type=radio]', function(){
        var id = $(this).prop('id');
        showInput(id);
    });
});

HTML

         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

           <div class="campo">
  <div class="exemplo-radio">
        <fieldset>
      <legend>Selecione o tipo de pacote <font color="red">*</font></legend>
      <label><input type="radio" name="Tipo_Desconto" id="irmao" value="Irmão" required> Irmão</label>
      <label><input type="radio" name="Tipo_Desconto" id="Bolsista" value="Bolsista" required> Bolsista</label>
      <label><input type="radio" name="Tipo_Desconto" id="Dois_Cursos" value="Dois cursos" required>2 cursos</label>
      <label><input type="radio" name="Tipo_Desconto" id="Nenhum" value="Nenhum" required>1 curso</label>
      </fieldset> 
  </div>
</div>
      <div id="documentType3">
<div class="campo">
        <fieldset>
      <legend>Adicional</legend>

<label class="container">Matrícula<input class='shared'  type='checkbox' value='30.00' id='Matricula' name='Matricula' onclick='soma_valores(this)'/><span class="checkmark"></span></label>
<label class="container">Figurino<input class='shared' type='checkbox' value='50.00' id='Figurino' name='Figurino' onclick='soma_valores(this)'/><span class="checkmark"></span></label>
</div>
</fieldset>
</div>
<div id="documentType2">
    <legend>Valor</legend>
    <input type='text' autocomplete='off' value='0.00' id='Preco' name='Preco'readonly  pattern='^[A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÊÍÏÓÒÖÚÇÑ ]+$' maxlength='500'/>
</div>

Browser other questions tagged javascript jquery checkbox radiobutton

You are not signed in. Login or sign up in order to post.