javascript - 尝试检查页面上的任何复选框是否被选中

Question

我想检查在名称文本框中输入文本时是否已选中网站上的任何复选框。我知道 EventListener 适用于名称，因为它无需 document.getElementsByName("event[]").checked 即可工作，但如何使其适用于复选框？

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

我建议:

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>

值得补充的是，使用 document.querySelector() 而不是使用索引，您的第一行可能会稍微简化:

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>

引用文献:

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