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

【问题标题】：If a radio button is selected, require MULTIPLE text fields to be filled in to validate the form如果选择了单选按钮，则需要填写多个文本字段以验证表单
【发布时间】：2020-03-03 21:43:50
【问题描述】：

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

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>

【问题讨论】：

'input[class="F429_mpvSetting"]' 这个类甚至不存在。您的变量 textInput 将始终为空。

标签： javascript html validation radio-group required-field

【解决方案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>

【讨论】：