Как задать доступ к chekbox для js?

217

12 апреля 2022, 18:50

Нужно посмотреть какие checkbox выбраны, но никак не могу получить к ним доступ. В html находится :

<strike>
<div class="content1">
    <div class="content">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/forAccount.js"></script>
    <!-- Service section
    ================================================== -->
    <section id="service" class="parallax-section">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-sm-10">
                    <div class="section-title">
                        <h1>Личный кабинет</h1>
                        <form action="chat" method="get">
                            <input type="submit" value="Чат поддержки">
                        </form>
                        <form action="logout" method="post">
                            <input type="submit" value="logout">
                        </form>
                        <form method="post" action="account">
                            <input type="hidden" name="deleteAccount" value=1/>
                            <input type="submit" value="Удалить аккаунт"/>
                        </form>

                        <br>
                        <br>
                            <h5> </h5>
                        <br>
                        <br>
                        <br>
                        <p>Ваши рейсы</p>
                    </div>
                </div>
                <table id="flightTable" class="table">
                    <thead>
                    <tr>
                        <th>Номер полета</th>
                        <th>Взлет</th>
                        <th>Приземление</th>
                        <th>Город</th>
                        <th>Авиакомпания</th>
                        <th>Терминал</th>
                        <th>Статус</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody class="flightsTable_res">
                    </tbody>
                </table>

                <br>
                <br>
                <br>
                <br>
                <br>
                <div class="col-md-8 col-sm-10">
                    <div class="section-title">
                        <p>Бронирование отеля</p>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <table class="table" id="hotelTable">
                            <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Название</th>
                                <th scope="col">Цена</th>
                                <th scope="col">Дата выезда</th>
                                <th scope="col">Дата заезда</th>
                                <th scope="col">Дополнительные услуги</th>
                                <th scope="col"></th>
                            </tr>
                            </thead>
                            <tbody class="hotelTable_res">
                                    <tr id="23">
                                        <td>23</td>
                                        <td>Стандартный номер</td>
                                        <td>4,500</td>
                                        <td>Nov 9, 2020</td>
                                        <td>Nov 7, 2020</td>
                                        <td id="23">
    <input type="checkbox" id="0" value="1" checked=""> Завтрак(200р.) <br>
  
    <input type="checkbox" id="1" value="2" checked=""> Обед(300р.) <br>
</strike>

Вот последние и мне нужно посмотреть нажаты или нет, в JS использую:

$('#hotelTable').find('.hotelTable_res').find("#23").find('#23').find('#0').checked

И не работает

Answer 1

Во-первых, id должен быть уникальным, то есть быть на странице в единственном экземпляре. У Вас же, и на <tr> и на <td> одинаковый. Вот на <input>-ax id разные, так и ищите по ним, не создавая таких длинных цепочек - jQuery специально для этого придумали.

Во-вторых, неплохо бы обернуть <input>-ы с их наименованиями в тег label.

Ну и по доступу - есть такой метод в jQuery - prop() :

console.log($('#0').prop("checked"));
console.log($('#1').prop("checked"));

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="content1">
  <div class="content">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/forAccount.js"></script>
    <!-- Service section
    ================================================== -->
    <section id="service" class="parallax-section">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-sm-10">
            <div class="section-title">
              <h1>Личный кабинет</h1>
              <form action="chat" method="get">
                <input type="submit" value="Чат поддержки">
              </form>
              <form action="logout" method="post">
                <input type="submit" value="logout">
              </form>
              <form method="post" action="account">
                <input type="hidden" name="deleteAccount" value=1/>
                <input type="submit" value="Удалить аккаунт" />
              </form>
              <br>
              <br>
              <h5> </h5>
              <br>
              <br>
              <br>
              <p>Ваши рейсы</p>
            </div>
          </div>
          <table id="flightTable" class="table">
            <thead>
              <tr>
                <th>Номер полета</th>
                <th>Взлет</th>
                <th>Приземление</th>
                <th>Город</th>
                <th>Авиакомпания</th>
                <th>Терминал</th>
                <th>Статус</th>
                <th></th>
              </tr>
            </thead>
            <tbody class="flightsTable_res">
            </tbody>
          </table>
          <br>
          <br>
          <br>
          <br>
          <br>
          <div class="col-md-8 col-sm-10">
            <div class="section-title">
              <p>Бронирование отеля</p>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <table class="table" id="hotelTable">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Название</th>
                    <th scope="col">Цена</th>
                    <th scope="col">Дата выезда</th>
                    <th scope="col">Дата заезда</th>
                    <th scope="col">Дополнительные услуги</th>
                    <th scope="col"></th>
                  </tr>
                </thead>
                <tbody class="hotelTable_res">
                  <tr id="23">
                    <td>23</td>
                    <td>Стандартный номер</td>
                    <td>4,500</td>
                    <td>Nov 9, 2020</td>
                    <td>Nov 7, 2020</td>
                    <td id="23">
                      <input type="checkbox" id="0" value="1" checked=""> Завтрак(200р.) <br>
                      <input type="checkbox" id="1" value="2" checked=""> Обед(300р.) <br>