Question

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

检查下面的代码段

＆＃13;

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();

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

你可以尝试类似于此的逻辑。

＆＃13;

$('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");
   }
})

＆＃13;

.input-text{
display:none;
}

.show{
display:block;
}

＆＃13;

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

＆＃13;

Answer 2

$('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>

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

2 个答案: