Question

因此，我有一个单选按钮，当选中该按钮时，我希望显示/隐藏以下两个字段。通过JS如何实现？

<div class="custom-control custom-switch mt-3">
    <input type="checkbox" class="custom-control-input" id="rtk1" name="rtk[checked][]" value="1">
    <label class="custom-control-label" for="rtk1">The categories of personal information <?= $config->get_company(); ?> has collected about you.</label>
</div>
<div class="row mt-3">
    <div class="col-sm-1"></div>
    <div class="col-sm-11">
        <i>Please provide the following information to be used for verification purposes:</i>
    </div>
</div>
<div class="row mt-3">
    <div class="col-sm-1"></div>
    <label for="rtk1Field1" class="col-sm-2 col-form-label">Field 1</label>
    <div class="col-sm-9">
        <input type="text" class="form-control" id="rtk1Field1" name="rtk[1][field1]" required>
        <div class="invalid-feedback">
            Field 1 is required.
        </div>
    </div>
</div>
<div class="row mt-3">
    <div class="col-sm-1"></div>
    <label for="rtk1Field2" class="col-sm-2 col-form-label">Field 2</label>
    <div class="col-sm-9">
        <input type="text" class="form-control" id="rtk1Field2" name="rtk[1][field2]" required>
        <div class="invalid-feedback">
            Field 2 is required.
        </div>
    </div>
</div>

Answer 1

正在运行的演示：https://jsfiddle.net/prceax3v/3/

HTML

<div class="custom-control custom-switch mt-3">
  <input type="checkbox" class="custom-control-input" id="rtk1" name="rtk[checked][]" value="1">
  <label class="custom-control-label" for="rtk1">The categories of personal information <?= $config->get_company(); ?> has collected about you.</label>
</div>
<div class="row mt-3">
  <div class="col-sm-1"></div>
  <div class="col-sm-11">
    <i>Please provide the following information to be used for verification purposes:</i>
  </div>
</div>
<div id='form-wrapper'>


  <div class="row mt-3">
    <div class="col-sm-1"></div>
    <label for="rtk1Field1" class="col-sm-2 col-form-label">Field 1</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="rtk1Field1" name="rtk[1][field1]" required>
      <div class="invalid-feedback">
        Field 1 is required.
      </div>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-sm-1"></div>
    <label for="rtk1Field2" class="col-sm-2 col-form-label">Field 2</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="rtk1Field2" name="rtk[1][field2]" required>
      <div class="invalid-feedback">
        Field 2 is required.
      </div>
    </div>
  </div>
</div>

JS

const formWrapper = document.getElementById('form-wrapper');

document.getElementById('rtk1').addEventListener('change', (e) => {
  if (e.target.checked) {
    formWrapper.style.display = 'none'
  } else {
    formWrapper.style.display = ''
  }
})

Answer 2

首先，您提供的是一个复选框，而不是单选按钮。如果要使用复选框，则可以使用以下代码完成您要的内容：

document.querySelector('input#rtk1').addEventListener( 'change', function() {
if(this.checked) {
    document.querySelectorAll('input[type="text"]').forEach(function(el) {
      el.style.display = 'none';
    });
} else {
  document.querySelectorAll('input[type="text"]').forEach(function(el) {
    el.style.display = 'block';
  });
}
});

如果您还希望隐藏每个文本字段旁边的标签，我建议向每个行容器（例如text-input-container）添加一个唯一的类，然后将该类名放在querySelectorAll调用中，而不是{ {1}}

根据单选按钮单击显示/隐藏表单字段

2 个答案: