Question

我在我的代码中遇到了这些问题。

1）单击复选框后，我必须显示选择下拉列表和textarea。

2）我必须在选中性别后显示男性和女性选项。

我在HTML中使用数据类型来选择下拉列表和textarea。如果任何用户单击状态复选框，则会出现选择下拉列表，如果单击地址，则会出现textarea。

我可以使用输入类型文本，复选框，广播，电子邮件，但无法显示下拉列表和文本区域。

你能帮助我吗？

＆＃13;

$(function() {
  $(".add_input").change(function() {
    if (this.checked) {
      $("#items").append('<div class="' + this.id + '"> <input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" /></div>');
    } else {
      $('#items').find('.' + this.id).remove();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="checkbox" name="check-fields" class="add_input" id="get_select" data-type="select"><label for="get_select">State</label>
<input type="checkbox" name="check-fields" class="add_input" id="get_textarea" data-type="textarea"><label for="get_textarea">Address</label>

<!--gender-->
<input type="checkbox" name="check-fields" class="add_input" id="get_radio" data-type="radio"><label for="get_radio">Gender</label>
<input type="radio" name="check-fields" id="get_radio" value="male">male
<input type="radio" name="check-fields" id="get_radio" value="female">female
<span id="items"></span>

＆＃13;

Answer 1

这是因为选择和文本区域表单元素不是使用标记创建的。我建议你回过头来查看它们是如何创建的。您必须稍微修改一下代码才能实现。但是对于select标签而言比文本区域更多。

https://www.w3schools.com/tags/tag_select.asp https://www.w3schools.com/tags/tag_textarea.asp

编辑：如果您要创建HTML而不是隐藏/显示HTML，我建议您检查以确保您创建的标记ID在创建之前尚未存在。

Answer 2

试试这个。

$(function() {
$('.radio').hide();
  $(".add_input").change(function() {
    if (this.checked) {
      $("#items").append('<div class="' + this.id + '"> <input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" /></div>');
    } else {
      $('#items').find('.' + this.id).remove();
    }
  });
   $("#get_textarea").change(function() {
     if (this.checked) {
      $("#items").append('<div class="' + this.id + '"><textarea rows="4" cols="50"></textarea></div>');
     } else {
      $('#items').find('.' + this.id).remove();
    }
   });
  $("#get_radio").change(function() {
    if ( $(this).is(':checked') ) {
        $('.radio').show();
    }else{
     $('.radio').hide();
    }
  });
});

这是fiddle。

选中复选框后如何显示textarea并选择标签？

2 个答案: