Преминете през няколко квадратчета за отметка и актуализирайте въведените резултати

Имам няколко квадратчета за отметка, в които трябва да публикувам стойността при изпращане на формуляр. В момента има 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 СРЕЩУ 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