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

Question

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

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

Answer 1

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

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