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

У меня есть несколько флажков, которые мне нужно указать при отправке формы. На данный момент их 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 или более раз с другим идентификатором, но могу ли я просто пройтись по циклу, чтобы было быстрее и чище? Я пытался, но не могу заставить его изменить скрытые значения. Спасибо


javascript checkbox
person wayneuk2    schedule 03.08.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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

person eisbehr    schedule 03.08.2018
comment
Пожалуйста, не используйте onclick и onchange... На данный момент это ерунда. - person Zenoo; 03.08.2018
comment
@Zenoo абсолютно прав! Сначала я этого не видел. Обновлено. - person eisbehr; 03.08.2018
comment
Кроме того, я думаю, что использование onchange здесь является плохой практикой для OP. Дополнительные сведения см. в разделе addEventListener VS onclick. - person Zenoo; 03.08.2018
comment
Абсолютно никаких недостатков в этом примере, чтобы использовать onlick. Это просто меньше кода. - person eisbehr; 03.08.2018
comment
Я говорил не о onclick, а об использовании addEventListener('change'). - person Zenoo; 03.08.2018
comment
Извините, я имею в виду onchange, конечно. ;) Но мой ответ такой же. Здесь нет недостатка. - person eisbehr; 03.08.2018
comment
Зависит от того, захочет ли OP сделать что-то еще в событии change своих входов позже. В любом случае, я оставлю вас в покое. Удачного кодирования! ^^ - person Zenoo; 03.08.2018

arrow_upward
0
arrow_downward

Вы можете сделать это, зациклив все свои 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="">

person Zenoo    schedule 03.08.2018