javascript - 如果选择单选按钮，则需要填写多个文本字段以验证表单

Question

我有一组 3 个单选按钮。如果选择了最后一个标记为“在家”的选项。必须填写所有 4 个文本字段才能使表单生效。我已经看到了大量有关如何使用复选框或单个文本字段执行此操作的信息，但是没有什么比我在这里尝试使用多个文本字段实现的目标更好的了。

HTML:

<div class="col-6 radio-group">
    <b><u>Backup Ventilator </u></b><b><u>Interface </u></b><br>
    <span>
    <input value="location" name="F429_backupAtLocRadio" type="radio" required="">
    </span><span>Location 
    <input value="hub" name="F429_backupAtLocRadio" type="radio">
    </span><span>Hub 
    <input value="inHome" name="F429_backupAtLocRadio" class="inHome" type="radio">
    </span>In Home 
    </div>
<div class="row">
 <div class="col-3">
    <span style="font-size: 11pt;">Model <br>
    <input id="backupModel" class="backupModel inHome" name="F429_backupModel" type="text">
    </span>
</div>
<div class="col-3">
    <span style="font-size: 11pt;">Serial# <br>
    <input id="F429_backupSerial" class="F429_backupSerial inHome" name="F429_backupSerial" type="text">
    </span>
</div>
<div class="col-3">
    <span style="font-size: 11pt;">Hours<br>
    <input id="F429_backupPmDueCurrentHours" class="F429_backupPmDueCurrentHours inHome" 
name="F429_backupPmDueCurrentHours" type="text">
    </span>
</div>
<div class="col-3">
    <span style="font-size: 11pt;">PM due date<br>
    <input id="F429_backupPmDueDate" class="F429_backupPmDueDate inHome" name="F429_backupPmDueDate" 
type="text">
    </span>
</div>
</div>

Javascript:

<script>
var radio = document.querySelector('input[class="inHome"]');
var textInput = document.querySelector('input[class="F429_mpvSetting"]');

function toggleRequired() {

if (textInput.hasAttribute('required') !== true) {
    textInput.setAttribute('required','required');
}

else {
    textInput.removeAttribute('required');  
}
}

radio.addEventListener('change',toggleRequired,false);

</script>

Answer 1

我想以下应该可以满足您的要求:

每当单击单选按钮时，事件函数都会迭代所有文本输入值，并将其属性 required 设置为 'required' 或将其删除，具体取决于是否选中 value='inHome' 的单选按钮。

const qsa=s=>[...document.querySelectorAll(s)];

const home=qsa('.radio-group [value=inHome]')[0],
      inps=qsa('.row input[type=text]');

qsa('.radio-group')[0].addEventListener('click',e=>{
if(e.target.type=='radio')
  inps.forEach(ti=>ti[(home.checked?'set':'remove')+'Attribute']('required','required'));
});

<form><div class="col-6 radio-group"> <b><u>Backup Ventilator </u></b><b><u>Interface </u></b><br>
 <label><input value="location" name="F429_backupAtLocRadio" type="radio" required="">
Location</label>
 <label><input value="hub" name="F429_backupAtLocRadio" type="radio">Hub</label>
 <label><input value="inHome" name="F429_backupAtLocRadio" class="inHome" type="radio">In Home </label></div>
 <div class="row"> <div class="col-3"> <span style="font-size: 11pt;">Model <br>
 <input id="backupModel" class="backupModel inHome" name="F429_backupModel" type="text"> </span> </div>
 <div class="col-3"> <span style="font-size: 11pt;">Serial# <br>
 <input id="F429_backupSerial" class="F429_backupSerial inHome" name="F429_backupSerial" type="text"> </span> </div>
 <div class="col-3"> <span style="font-size: 11pt;">Hours<br>
 <input id="F429_backupPmDueCurrentHours" class="F429_backupPmDueCurrentHours inHome" name="F429_backupPmDueCurrentHours" type="text"> </span> </div>
 <div class="col-3"> <span style="font-size: 11pt;">PM due date<br>
 <input id="F429_backupPmDueDate" class="F429_backupPmDueDate inHome" name="F429_backupPmDueDate" type="text"> </span> </div>
 </div><input type="submit">
</div></form>