Question

我有几个复选框，需要在提交表单时张贴其值。目前有4个，可能还会更多，所以我在考虑添加一个函数而不是添加单个函数，而是可以遍历所有函数并一次更新受关注的字段。我在Google Maps的表单填充中看到了类似的内容，但并不完全相同。所以我有这样的输入：

function myCheck() {
    var checkBox = document.getElementById("email_alerts");
    if (checkBox.checked == true){
        document.getElementById('form_email_alerts').value = 'YES'
    } else {
        document.getElementById('form_email_alerts').value = 'NO'
    }
}

<ul class="confirm details">
  <li class="selected">Please confirm your contact preferences</li>
  <li><input type="checkbox" id="email_alerts" value="YES" onclick="myCheck()"> Receive email alerts</li>
  <li><input type="checkbox" id="sms_alerts" value="NO" onclick="myCheck()"> Receive free SMS alerts</li>
  <li><input type="checkbox" id="offers_alerts" value="NO" onclick="myCheck()"> Receive offers and discounts</li>
  <li><input type="checkbox" id="instant_alerts" value="NO" onclick="myCheck()"> Receive Instant Notifications</li>
</ul>
    
<input id="form_email_alerts" type="hidden" value="">
<input id="form_sms_alerts" type="hidden" value="">
<input id="form_offers_alerts" type="hidden" value="">
<input id="form_instant_alerts" type="hidden" value="">

我可以使用不同的ID将其添加4次或更多次，但是我可以循环遍历吗，这样更快捷，更干净？我已经尝试过，但无法更改隐藏的值。谢谢

Answer 1

您可以通过在所有checkboxes上循环并在每个事件上添加一个事件侦听器，并更新其他输入字段来做到这一点。

PS：在这里，我删除了hidden类型，以便您查看每个输入的值。

document.querySelectorAll('ul.details li input').forEach(input => {
  input.addEventListener('change', function(){
    let finalInput = document.querySelector('#form_'+input.id);
    if(finalInput) finalInput.value = input.checked ? 'YES' : 'NO';
  });
});

<ul class="confirm details">
  <li class="selected">Please confirm your contact preferences</li>
  <li><input type="checkbox" id="email_alerts" value="YES"> Receive email alerts</li>
  <li><input type="checkbox" id="sms_alerts" value="NO"> Receive free SMS alerts</li>
  <li><input type="checkbox" id="offers_alerts" value="NO"> Receive offers and discounts</li>
  <li><input type="checkbox" id="instant_alerts" value="NO"> Receive Instant Notifications</li>
</ul>
    
<input id="form_email_alerts" value="">
<input id="form_sms_alerts" value="">
<input id="form_offers_alerts" value="">
<input id="form_instant_alerts" value="">

Answer 2

由于您的ID格式正确，因此您可以循环选中所有复选框：

document.querySelectorAll('input[type=checkbox]').forEach(e => {
  e.onchange = () => document.getElementById('form_' + e.id).value = e.checked ? 'YES' : 'NO';
});

<ul class="confirm details">
  <li class="selected">Please confirm your contact preferences</li>
  <li><input type="checkbox" id="email_alerts" value="YES"> Receive email alerts</li>
  <li><input type="checkbox" id="sms_alerts" value="NO"> Receive free SMS alerts</li>
  <li><input type="checkbox" id="offers_alerts" value="NO"> Receive offers and discounts</li>
  <li><input type="checkbox" id="instant_alerts" value="NO"> Receive Instant Notifications</li>
</ul>

<input id="form_email_alerts" type="text" value="NO">
<input id="form_sms_alerts" type="text" value="NO">
<input id="form_offers_alerts" type="text" value="NO">
<input id="form_instant_alerts" type="text" value="NO">

遍历几个复选框并更新结果输入

2 个答案: