javascript清除复选框上的输入表单值取消选中

Question

选中第一个复选框时，它会显示第一个输入字段，并且当选中第二个复选框时，它将显示第二个输入字段并隐藏第一个输入字段。所以我的问题是如何在选中第二个复选框时重置第一个复选框的输入字段，反之亦然。

检查下面的代码片段

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="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" >