Checkbox select console log the checkbox selected name and put them into an array?

Question

Hi i just wonder is that a way where we can console.log the checkbox is check ? and display the correct name like say monday is check it display monday in console.log and if uncheck this monday display gone ?

and i would also like it to put it into an array if possible?

Something like this but however this array depend on the checkbox selected?

[{"Day":"Monday"},{"Day":"Tuesday"},{"Day":"Wednesday"},{"Day":"Thursday"},{"Day":"Friday"},{"Day":"Saturday"},{"Day":"Sunday"}]

<div class="box">
  <input type="checkbox" class="weekly-day" id="monday" name="monday" value="Monday">
  <label for="monday"> Monday</label><br>
  <input type="checkbox" class="weekly-day" id="tuesday" name="tuesday" value="Tuesday">
  <label for="tuesday"> Tuesday</label><br>
  <input type="checkbox" class="weekly-day" id="wednesday" name="wednesday" value="Wednesday">
  <label for="wednesday"> Wednesday</label><br>
  <input type="checkbox" class="weekly-day" id="thursday" name="thursday" value="Thursday">
  <label for="thursday"> Thursday</label><br>
  <input type="checkbox" class="weekly-day" id="friday" name="friday" value="Friday">
  <label for="Friday"> Friday</label><br>
  <input type="checkbox" class="weekly-day" id="saturday" name="saturday" value="Saturday">
  <label for="saturday"> Saturday</label><br>
  <input type="checkbox" class="weekly-day" id="sunday" name="sunday" value="Sunday">
  <label for="Sunday"> Sunday</label><br>
</div>

How have you attempted to log whether they are checked? When should they be logged? — mykaf
– mykaf, Commented Jan 24, 2022 at 17:16
I think you can try getting the <div> and then looping over it to get all <input>s and changing their onchange attribute to a function that checks if it's checked and if yes, console.log() it. If not, console.clear() to clear the console. — The Amateur Coder
– The Amateur Coder, Commented Jan 24, 2022 at 17:19
Or, you can add listeners for the <input>s one by one by first finding them by their ids and then changing the attribute in the same way. — The Amateur Coder
– The Amateur Coder, Commented Jan 24, 2022 at 17:21

GenericUser · Accepted Answer · 2022-01-24 17:19:22Z

If you add an event listener for when the inputs fire a change event, you can add that capability.

const box = document.getElementsByClassName("box")[0];
const inputs = box.getElementsByTagName("input");

for (const input of inputs) {
  input.addEventListener("change", () => logValues());
}

function logValues() {
  const output = [];
  for (const input of inputs) {
    output.push([input.value, input.checked]);
  }
  console.log(output);
}

<div class="box">
  <input type="checkbox" class="weekly-day" id="monday" name="monday" value="Monday">
  <label for="monday"> Monday</label><br>
  <input type="checkbox" class="weekly-day" id="tuesday" name="tuesday" value="Tuesday">
  <label for="tuesday"> Tuesday</label><br>
  <input type="checkbox" class="weekly-day" id="wednesday" name="wednesday" value="Wednesday">
  <label for="wednesday"> Wednesday</label><br>
  <input type="checkbox" class="weekly-day" id="thursday" name="thursday" value="Thursday">
  <label for="thursday"> Thursday</label><br>
  <input type="checkbox" class="weekly-day" id="friday" name="friday" value="Friday">
  <label for="Friday"> Friday</label><br>
  <input type="checkbox" class="weekly-day" id="saturday" name="saturday" value="Saturday">
  <label for="saturday"> Saturday</label><br>
  <input type="checkbox" class="weekly-day" id="sunday" name="sunday" value="Sunday">
  <label for="Sunday"> Sunday</label><br>
</div>

Collectives™ on Stack Overflow

Checkbox select console log the checkbox selected name and put them into an array?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related