change radio

change-radio.markdown

change radio

A Pen by Pedro Rojas on CodePen.

License.

index.html

<div class="container">
<form id="findCandidates" method="post">
  <div class="row">
    <div class="col-lg-4">
      <span>Filtrar por</span>
      <p>
        <input type="radio" id="filter-uuid" name="filter-by" class="filter-by" value="uuid" checked>
        <label for="filter-uuid">UIID</label>

        <input type="radio" id="filter-date" name="filter-by" class="filter-by" value="date" />
        <label for="filter-date">
                    Rango de fechas
                </label>
      </p>
    </div>

    <div class="col-lg-8">
      <div class="row">

        <div class="col s6 file-content">
          <span>Subir archivo</span>
          <div>
            <input type="file" name="file-uuid">
          </div>
        </div>

        <div class="col s3 range-date hide">
          <span>Fecha inicial</span>
          <input type="text" id="startDate" name="startDate" placeholder="A/M/D" class="datepicker">
        </div>

        <div class="col s3 range-date hide">
          <span>Fecha final</span>
          <input type="text" id="endDate" name="endDate" placeholder="A/M/D" class="datepicker">
        </div>
      </div>
    </div>

  </div>
</form> 
</div>

script.js

$(document).on('change','.filter-by', function(e){
  var filterBy = $(this).val();

  if(filterBy !== undefined){
    
    if(filterBy  === 'uuid'){
       console.log('filtrado por', filterBy);
      $('.range-date').hide();
      $('.file-content').show();
    }
    
    if(filterBy  === 'date'){
       console.log('filtrado por', filterBy);
      $('.file-content').hide();
      $('.range-date').show();
    }
  }
});

scripts

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

style.css

.hide{
  display:none;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />