Loop through several check boxes and update inputs on results

Question

I have several check boxes that I need to post the value of when a form is submitted. There is 4 at the moment and could be more so I was thinking of instead of adding individual functions is it possible to loop through them all and update respected fields in one go. I have seen a similar thing with form population with google maps but not quite the same. So I have a input like so:

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

I could add this 4 times or more with different ID but can I just loop through so be quicker and cleaner? I have tried but cant get it to change the hidden values. Thanks

score 0 · Answer 1 · answered Aug 03 '18 at 12:03

You could do that by looping on all your checkboxes and adding an event listener on each, updating the other input fields.

PS: here I removed the hidden type for you to see the value of every input.

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

eisbehr · Accepted Answer · 2018-08-03T12:07:08.197

0

As your IDs have a good format, you can just loop all checkboxes:

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

edited Aug 03 '18 at 12:07

answered Aug 03 '18 at 12:03

eisbehr

12,243
7
38
63

Please don't use `onclick` and `onchange` ... It's nonsense at this point. – Zenoo Aug 03 '18 at 12:07
@Zenoo is absolutly right! I had not seen this at first. Updated. – eisbehr Aug 03 '18 at 12:07
Furthermore, I think using `onchange` is bad practice for OP here. See [addEventListener VS onclick](https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick) for more. – Zenoo Aug 03 '18 at 12:09
Absolutely no drawback in this example, to use `onlick`. It's just less code. – eisbehr Aug 03 '18 at 12:11
I wasn't talking about `onclick`, more about using `addEventListener('change')` instead. – Zenoo Aug 03 '18 at 12:17
Sorry, i mean `onchange` of course. ;) But my answer is the same. No drawback here. – eisbehr Aug 03 '18 at 12:18
Depends if OP wants to do something else on the `change` event of his inputs later on. Anyway, I'll leave you in peace. Happy coding ! ^^ – Zenoo Aug 03 '18 at 12:20

Loop through several check boxes and update inputs on results

2 Answers2