Question

我有一个带有ID GlandularFever的复选框，点击（检查它）我可以让它显示另一个带有数据字段name="GlandularDetails"的DIV。虽然没有检查，我怎么能让它再次隐藏该div？如果数据字段name="GlandularDetails hidden = true然后显示，则数据字段name="GlandularDetails hidden = false然后隐藏。

<script>
$(document).ready(function(){
 $("#GlandularFever").click(function(){

  $(document.querySelectorAll('[data-field name="GlandularDetails"]')).show(100); 
  hidden = false;

  });  
});
</script>

    <div class="col-md-12">
        <div class="funkyradio">
            <div class="funkyradio-primary col-md-4">
                <input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever"/>
                <label for="GlandularFever">Glandular Fever</label>
            </div>
        </div> 
    </div> 

    <div class="form-group col-md-12" data-field-name="GlandularDetails">
        <label class="control-label">Details</label>
        <textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100"  class="form-control" placeholder=""></textarea>
    </div>

谢谢

Answer 1

试试这个：

$(document).ready(function () {
  $('#GlandularFever').click(function () {
    if ($(this).prop('checked')) {
      $('[data-field name="GlandularDetails"]').show(100);
    } else {
      $('[data-field name="GlandularDetails"]').hide(100);
    }
  });
});

Answer 2

您可以使用JQuery方法.toggle( [duration ] [, complete ] )

＆＃13;

var glandularDetails = $('[data-field-name="GlandularDetails"]');
glandularDetails.hide();

$("#GlandularFever").click(function() {
  glandularDetails.toggle(500);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
  <div class="funkyradio">
    <div class="funkyradio-primary col-md-4">
      <input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever" />
      <label for="GlandularFever">Glandular Fever</label>
    </div>
  </div>
</div>

<div class="form-group col-md-12" data-field-name="GlandularDetails">
  <label class="control-label">Details</label>
  <textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea>
</div>

＆＃13;

Answer 3

使用toggle在隐藏和可见之间切换。

另外，使用jQuery时请避免使用document.querySelectorAll。 jQuery自动处理：

$("#GlandularFever").click(function() {
  $('[data-field-name="GlandularDetails"]').toggle(100);
});

div.form-group {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
  <div class="funkyradio">
    <div class="funkyradio-primary col-md-4">
      <input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever" />
      <label for="GlandularFever">Glandular Fever</label>
    </div>
  </div>
</div>

<div class="form-group col-md-12" data-field-name="GlandularDetails">
  <label class="control-label">Details</label>
  <textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea>
</div>

Answer 4

检查此代码并运行

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("div[data-field-name=GlandularDetails]").hide();
 $("#GlandularFever").click(function(){
    
	  if($(this).is(':checked'))
	  {
		  $("div[data-field-name=GlandularDetails]").show();
	  }
	  else
	  {
		  $("div[data-field-name=GlandularDetails]").hide();
	  }
  });  
});
</script>

    <div class="col-md-12">
        <div class="funkyradio">
            <div class="funkyradio-primary col-md-4">
                <input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever"/>
                <label for="GlandularFever">Glandular Fever</label>
            </div>
        </div> 
    </div> 

    <div class="form-group col-md-12" data-field-name="GlandularDetails">
        <label class="control-label">Details</label>
        <textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100"  class="form-control" placeholder=""></textarea>
    </div>

＆＃13;

如何选中和取消选中复选框可以显示和隐藏div

4 个答案: