Перебрать несколько флажков и обновить входные данные по результатам

1

У меня есть несколько флажков, которые мне нужно, чтобы опубликовать значение при отправке формы. На данный момент существует 4, и я мог бы подумать, что вместо добавления отдельных функций можно пропустить их все и обновить уважаемые поля за один раз. Я видел подобную вещь с населением формы с картами Google, но не совсем то же самое. Итак, у меня есть вход так:

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="">

Я мог бы добавить это 4 раза или более с разными ID, но могу ли я просто пропустить, чтобы быть быстрее и чище? Я попытался, но не могу заставить его изменить скрытые значения. Спасибо

Теги:
checkbox

2 ответа

0
Лучший ответ

Поскольку ваши идентификаторы имеют хороший формат, вы можете просто соединить все флажки:

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">
Поделиться
  • 0
    Супер, именно то, что мне нужно, спасибо
  • 0
    Пожалуйста, не используйте onclick и onchange ... Это чепуха на данный момент.
Показать ещё 6 комментариев
0

Вы можете сделать это, перейдя на все ваши 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="">
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню