时间戳

首页 > 解决方案 > 试图检查页面上是否有任何复选框被选中

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

问题描述

我想检查在名称文本框中输入文本时是否选中了网站上的任何复选框。我知道 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>

标签： javascripthtml

解决方案

我建议：

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>

参考：

推荐阅读