Trying to check if any checkbox on the page is checked

Question

I want to check if any checkbox on the website has been checked when text has been entered in the name text box. I know that the EventListener works for name since this works without the document.getElementsByName("event[]").checked, but how do I make it work for the checkboxes?

document.getElementsByName("name")[0].addEventListener('change', (event) => {
  if (event.target.value.length != 0 && document.getElementsByName("event[]").checked ) {
  window.alert("checked");
 }
})

<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
  <section id="Events">
    <h2>Select Events</h2>
    <div class='item'>
      <span class='eventTitle'>Event number 1</span>
      <span class='eventPrice'>10.50</span>
      <span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
    </div>
    <div class='item'>
      <span class='eventTitle'>Event number 2</span>
      <span class='eventPrice'>5.00</span>
      <span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
    </div>
    <section id="Cost">
      <input type="radio" name="delivery" value="ticket" data-price="10">
      <h2>Total Price</h2>
      Total Price <input type="text" name="total" size="12">
      <p>Name<input type="text" name="name"></p>
    </section>

    <p><input type="submit" name="submit" value="Book"></p>
  </section>
</form>

Answer 1

I'd suggest:

document.getElementsByName("name")[0].addEventListener('change', (event) => {
  // here we used event.target.value.trim.length in order to guard against
  // white-space strings being considered valid (if that's not a problem
  // then the trim() method can be removed), and also we used:
  // document.querySelector() to find the first of any <input> element
  // with a type equal to 'checkbox' which is also checked;
  // document.querySelector() returns either the first such element or null:
  if (event.target.value.trim().length > 0 && 
      document.querySelector('input[type=checkbox]:checked') !== null) {
    window.alert("checked");
  }
});

document.getElementsByName("name")[0].addEventListener('change', (event) => {
  if (event.target.value.trim().length > 0 &&
    document.querySelector('input[type=checkbox]:checked') !== null) {
    window.alert("checked");
  }
})

<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
  <section id="Events">
    <h2>Select Events</h2>
    <div class='item'>
      <span class='eventTitle'>Event number 1</span>
      <span class='eventPrice'>10.50</span>
      <span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
    </div>
    <div class='item'>
      <span class='eventTitle'>Event number 2</span>
      <span class='eventPrice'>5.00</span>
      <span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
    </div>
    <section id="Cost">
      <input type="radio" name="delivery" value="ticket" data-price="10">
      <h2>Total Price</h2>
      Total Price <input type="text" name="total" size="12">
      <p>Name<input type="text" name="name"></p>
    </section>

    <p><input type="submit" name="submit" value="Book"></p>
  </section>
</form>

It's worth adding that your first line could be potentially simplified a little using document.querySelector() rather than using indices:

document.querySelector("input[name=name]").addEventListener('change', (event) => {
  if (event.target.value.trim().length > 0 && 
      document.querySelector('input[type=checkbox]:checked') !== null) {
    window.alert("checked");
  }
});

document.querySelector('input[name=name]').addEventListener('change', (event) => {
  if (event.target.value.trim().length > 0 &&
    document.querySelector('input[type=checkbox]:checked') !== null) {
    window.alert("checked");
  }
});

<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
  <section id="Events">
    <h2>Select Events</h2>
    <div class='item'>
      <span class='eventTitle'>Event number 1</span>
      <span class='eventPrice'>10.50</span>
      <span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
    </div>
    <div class='item'>
      <span class='eventTitle'>Event number 2</span>
      <span class='eventPrice'>5.00</span>
      <span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
    </div>
    <section id="Cost">
      <input type="radio" name="delivery" value="ticket" data-price="10">
      <h2>Total Price</h2>
      Total Price <input type="text" name="total" size="12">
      <p>Name<input type="text" name="name"></p>
    </section>

    <p><input type="submit" name="submit" value="Book"></p>
  </section>
</form>

References:

• CSS:
  • Attribute-selectors ([attribute=attribute-value]).
  • :checked.
• JavaScript:
  • document.querySelector().
  • String.prototype.trim()

Answer 2

document.getElementsByName("name")[0].addEventListener('change', (event) => {
 if(event.target.value.length !== 0) {
  // Get all checkboxes  
  const checkboxes = document.getElementsByName("event[]");
  for(i=0; i<checkboxes.length; i++) {
    // Check if checkbox is checked or not
    if(checkboxes[i].checked) {
     window.alert("checked");
    }
  }
 }
})

Answer 3

Use document.querySelectorAll to get an array containing all the checkbox inputs in the document:

var checkboxes = document.querySelectorAll("input[type=checkbox]");

Then, to check if any of the checkboxes are checked:

var anyChecked = false;
for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    anyChecked = true;
    break;
  }
}

Alternatively, if you want an array containing only the checkboxes that are checked, you can do the following:

var checkedCheckboxes = checkboxes.filter(checkbox => checkbox.checked);

Answer 4

//--Get all checkboxes, you can have another way of fetching checkboxes
var checkBoxes = document.getElementsByTagName("input");
//--For each checkbox, check if it is selected
for (var i = 0; i < checkBoxes.length; i++) {
    if (checkBoxes[i].checked == true) {
        alert('checked');
    }
}