javascript - JQuery单击复选框以显示来自div的特定字段

Question

我有一个下拉菜单，可以使用 Jquery 在 3 个不同的复选框中显示值。但是当我点击复选框时没有输入字段显示？

$('#response').click(function() {
  if ($(this).is(':checked')) {
    $("#displayrow").show();
  } else {
    $("#displayrow").hide();
  }
});

/*
     function Payoutmethods(countryid){
            $.ajax({
            url: "abc.php",
            type: "post",
            data: {cid:cid},
            success: function (methods){
            $('#displayresponse').html(methods);
            }            
                }); 
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-group">

  <div class="controls" id="displayresponse">
    <input type="checkbox" name="response" id="response" value="">
  </div>
</div>
<div id="displayrow" style="display: none;">
  <div class="control-group">
    <div class="controls">
      <input type="text" id="displayrow" name="displayrow" />
      <input type="text" name="displayrow" id="displayrow" />
    </div>
  </div>
</div>

标签： javascriptjquery

Answer 1

$(function() {...})只有在加载文档后，您才需要将代码放入其中执行：

$(function() {

  $('#response').change(function(){
    if( $(this).is(':checked')) 
    {
      $("#displayrow").show();
    } else {
      $("#displayrow").hide();
    }
  });
  
});

$(function() {

  $('#response').change(function(){
    if( $(this).is(':checked')) 
    {
      $("#displayrow").show();
    } else {
      $("#displayrow").hide();
    }
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-group">

<div class="controls" id="displayresponse">
<input type="checkbox" name="response" id="response" value="">
</div></div>
    <div id="displayrow" style="display: none;">
    <div class="control-group"><div class="controls">
        <input type="text" id="displayrow" name="displayrow" / >
        <input type="text" name="displayrow" id="displayrow" />      
</div></div></div>