时间戳

首页 > 解决方案 > 循环遍历多个复选框并更新结果输入

javascript - 循环遍历多个复选框并更新结果输入

问题描述

我有几个复选框，我需要在提交表单时发布值。目前有 4 个，并且可能更多，所以我在考虑不是添加单个函数，而是可以循环遍历它们并一次性更新受尊重的字段。我在使用谷歌地图的表单人口中看到了类似的事情，但并不完全相同。所以我有这样的输入：

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 次或更多，但我可以循环通过以便更快更清洁吗？我已经尝试过但无法更改隐藏值。谢谢

标签： javascriptcheckbox

解决方案

您可以通过循环所有您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="">

推荐阅读