如果選擇了單選按鈕，則需要填寫多個文本字段以驗證表單

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>