javascript clear input form value on checkbox uncheck

Question

When the first checkbox is checked it shows the first input field and when the second checkbox is checked it will shows the second input field and hide out the first input field. So my question is how to reset input field of the first checkbox when the second checkbox is checked and vise versa.

Check the code snippet below

var FormStuff = {

  init: function() {
    this.applyConditionalRequired();
    this.bindUIActions();
  },

  bindUIActions: function() {
    $("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
  },

  applyConditionalRequired: function() {

    $(".require-if-active").each(function() {
      var el = $(this);
      if ($(el.data("require-pair")).is(":checked")) {
        el.prop("required", true);
        $(this).closest('div').find('.form-control').val('');
      } else {
        el.prop("required", false);

      }
    });

  }

};

FormStuff.init();

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.reveal-if-active label {
  display: block;
  margin: 0 0 3px 0;
}

.reveal-if-active input[type=text] {
  width: 100%;
}

input[type="radio"]:checked~.reveal-if-active,
input[type="checkbox"]:checked~.reveal-if-active {
  opacity: 1;
  max-height: 100px;
  padding: 10px 20px;
  -webkit-transform: scale(1);
  transform: scale(1);
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div>
    <input type="radio" name="choice-animals" id="choice-animals-dogs" required>
    <label for="choice-animals-dogs">I like dogs more</label>
    <div class="reveal-if-active">
      <!-- <label for="which-dog">Good call. What's the name of your favorite dog?</label>
        <input type="text" id="which-dog" name="which-dog" class="require-if-active" data-require-pair="#choice-animals-dogs"> -->
      <div class="row">
        <div class="col-sm-6">
          <label for="quantity">Quantity</label>
          <input type="text" class="form-control" id="quantity" name="quantity" value="<?php echo set_value('quantity'); ?>">
        </div>
      </div>
    </div>
  </div>
  <div>
    <input type="radio" name="choice-animals" id="choice-animals-cats">
    <label for="choice-animals-cats">I like cats more</label>
    <div class="reveal-if-active">
      <div class="row">
        <div class="col-sm-6">
          <label for="quantity">Quantity</label>
          <input type="text" class="form-control" id="quantity" name="quantity" value="<?php echo set_value('quantity'); ?>">
          <?php echo form_error('quantity'); ?>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

$('input[type=radio]').on('change', function() {
  var check = this;
   $('.dogOrCat').hide().filter(function() {
    return check.checked && this.classList.contains(check.value);
  }).show();
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="form-group">
  <div>
    <input type="radio" name="choice-animals" id="choice-animals-dogs" value='dog'>
    <label for="choice-animals-dogs">I like dogs more</label>
    <div class="reveal-if-active">
      <!-- <label for="which-dog">Good call. What's the name of your favorite dog?</label>
        <input type="text" id="which-dog" name="which-dog" class="require-if-active" data-require-pair="#choice-animals-dogs"> -->
      <div class="row">
        <div class="dogOrCat dog">
        <div class="col-sm-6">
          <label for="quantity" >Quantity</label>
          <input type="text"  id="quantity" name="quantity"  value="<?php echo set_value('quantity'); ?>">
          <?php echo form_error('quantity'); ?>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div>
    <input type="radio" name="choice-animals" id="choice-animals-cats" value='cat'>
    <label for="choice-animals-cats">I like cats more</label>
    <div class="reveal-if-active">
      <div class="row">
      <div class="col-sm-6">
        <div class="dogOrCat cat">
          <label for="quantity" >Quantity</label>
          <input type="text"   id="quantity" name="quantity"  value="<?php echo set_value('quantity'); ?>">
          <?php echo form_error('quantity'); ?>
         
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

Answer 2

you can try logic something similar to this.

$('input[type="checkbox"]').on("change",function(){
  $('input[type="checkbox"]').not(this).attr("checked",false);
  var id=$(this).attr('id');
  if($(this).is(':checked')){
    $('input[type="text"]').val('');
    $('input[type="text"]').attr('class','input-text');
    $('*[data-elem="'+id+'"]').attr("class","show");
   }else{
    $('*[data-elem="'+id+'"]').attr("class","input-text");
   }
})

.input-text{
display:none;
}

.show{
display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="first">

<input type="checkbox" id="second">

<input type="text" placeholder="First Input" data-elem="first" class="input-text" >

<input type="text" placeholder="Second Input" data-elem="second" class="input-text" >