如何隐藏未选中的表单的输入字段并仅显示已选中的输入字段答案

【问题标题】：How to hide input fields of a form which are not checked and display only checked ones如何隐藏未选中的表单的输入字段并仅显示已选中的输入字段
【发布时间】：2019-07-30 12:15:05
【问题描述】：

我有一个包含许多输入字段的表单。在每次输入更改时，都会有一个复选框被选中。现在我只想显示那些在按钮单击时选中的字段并隐藏其他字段。我不确定实现这种行为的最佳方法是什么。稍后单击下一个按钮，我将只提交选中的字段。

<div class="form-group">
  <div class="checkbox">
    <input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
    <label for="checkbox-1"></label>                           
  </div>
  <div class="field">
    <input type="text" value="" id="field-1" name="field-1">
    <label class="form-label">Field 1</label>
  </div>
</div>

<div class="form-group">
  <div class="checkbox">
    <input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
    <label for="checkbox-2"></label>                           
  </div>
  <div class="field">
    <input type="text" value="" id="field-2" name="field-2">
    <label class="form-label">Field 2</label>
  </div>
</div>

<div class="form-group">
  <div class="checkbox">
    <input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
    <label for="checkbox-3"></label>                           
  </div>
  <div class="field">
    <input type="text" value="" id="field-3" name="field-3">
    <label class="form-label">Field 3</label>
  </div>
</div>

<button type="button" >click</button>

以下 jQuery 功能是检查输入字段更改的复选框

$('.form-group').find('input[type=text], select').on('change', function () {
    $(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});

【问题讨论】：

标签： javascript jquery forms input

【解决方案1】：

如果我理解你的问题，它可以帮助你：https://api.jquery.com/has/ 像这样：

$('.form-group:not(:has(input:checked))').hide();

【讨论】：

小修复，请再次检查
它仍然隐藏所有表单组

【解决方案2】：

这是一个简单的例子。或者，您也可以查看 Select2 插件。

<script>
    $(document).ready(function(){

        //hide by default
        $('#field1').hide();

        $('#check1').click(function(e){
            if ($('#check1').prop('checked')){
                $('#field1').show();
            }else{
                $(#field1).hide();
            }
        });
    });
</script>


<body>

    <form>

        <label for="check1">click me</label>
        <input id="check1" type="checkbox"/>
        <input id="field1" type="text"/>

    </form>

</body>

【讨论】：

【解决方案3】：

试试这一行js代码

<button type="button" id="btn">click</button>

$('#btn').on('click', function () {
   $('[type=checkbox]:not(:checked)').closest(".form-group").hide()
});

【讨论】：

它将隐藏选中的输入字段
实际上现在如果没有检查它会隐藏所有字段

【解决方案4】：

我在这里尝试了一个解决方案

$('.form-group').find('input[type=checkbox]').on('change', function() {
  //hide input
  $(this).closest('.form-group').find('.field').attr('style', 'display:none');
  //hide checkbox
  $(this).closest('.form-group').find('.checkbox').attr('style', 'display:none');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group">
  <div class="checkbox">
    <input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" checked='true' />
    <label for="checkbox-1"></label>
  </div>
  <div class="field">
    <input type="text" value="" id="field-1" name="field-1">
    <label class="form-label">Field 1</label>
  </div>
</div>

<div class="form-group">
  <div class="checkbox">
    <input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" checked='true' />
    <label for="checkbox-2"></label>
  </div>
  <div class="field">
    <input type="text" value="" id="field-2" name="field-2">
    <label class="form-label">Field 2</label>
  </div>
</div>

<div class="form-group">
  <div class="checkbox">
    <input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" checked='true' />
    <label for="checkbox-3"></label>
  </div>
  <div class="field">
    <input type="text" value="" id="field-3" name="field-3">
    <label class="form-label">Field 3</label>
  </div>
</div>

<button type="submit">click</button>

【讨论】：

【解决方案5】：

这是您问题的解决方案。

在按钮点击事件上，您可以检查每个复选框的值是否被选中！

基于is(':checked')隐藏/显示输入字段

$('.form-group').find('input[type=text], select').on('change', function () {
    $(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});

$("#btn").click(function(){
  var count = 0;
  $('input[type=checkbox]').each(function(ind,value){
    if ($(this).is(':checked')) {
      count++;
    }
  });
  //check if atleast one check box is selected
  if(count > 0){
    $('input[type=checkbox]').each(function(ind,value){
      if (!$(this).is(':checked')) {
        $(this).parent().hide();
        $(this).parent().next().hide();

      }
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <div class="checkbox">
    <input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
    <label for="checkbox-1"></label>                           
  </div>
  <div class="field">
    <input type="text" value="" id="field-1" name="field-1">
    <label class="form-label">Field 1</label>
  </div>
</div>

<div class="form-group">
  <div class="checkbox">
    <input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
    <label for="checkbox-2"></label>                           
  </div>
  <div class="field">
    <input type="text" value="" id="field-2" name="field-2">
    <label class="form-label">Field 2</label>
  </div>
</div>

<div class="form-group">
  <div class="checkbox">
    <input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
    <label for="checkbox-3"></label>                           
  </div>
  <div class="field">
    <input type="text" value="" id="field-3" name="field-3">
    <label class="form-label">Field 3</label>
  </div>
</div>

<button type="button" id="btn">click</button>

【讨论】：

如果你点击按钮而不检查任何输入，将隐藏所有字段
我已经添加了检查是否至少有一个复选框被选中然后只隐藏未选中的验证