Как выбрать оптимальный стейт и обработать вложенные чекбоксы?

Question

[Марат Иванов]

Суть: есть вложенный список в нем два уровня, с чекбоксами. как организовать стейт?

Общая структура:
- item1
-- выбрать все
-- чекбокс 1 {id, title}
-- чекбокс 2 {id, title}
- item2
-- выбрать все
-- чекбокс 1 {id, title}
-- чекбокс 2 {id, title}

Важно: id чекбоксов в разных item могут совпадать. Но item имеет уникальный id.
Как организовать стейт и обработать onChange? Всем спасибо!!!

Answer 1

[gogowq]

Делал недавно подобное .Вот мой php+js.

<div class="box">
                  <div class="head">
                     <h2 class="title">Select documents to download</h2>
                     <span class="arrow">
                        <svg xmlns="http://www.w3.org/2000/svg" width="27.269" height="15.756" viewBox="0 0 27.269 15.756">
                           <path d="M925.974,98.658l-13.2-13.2a1.5,1.5,0,1,1,2.121-2.121l11.074,11.074,11.074-11.074a1.5,1.5,0,0,1,2.121,2.121Z" transform="translate(-912.339 -82.902)" fill="#dc5d37" />
                        </svg>
                     </span>
                  </div>
                  <div class="body">

                     <ul class="download-list">
                        <?php
                        // Check rows exists.
                        if (have_rows('download_docs')) :
                           $cnt = 0;
                           // Loop through rows.
                           while (have_rows('download_docs')) : the_row(); ?>
                              <?php
                              $cnt++;

                              $file = get_sub_field('doc');
                              $filedir = get_attached_file($file['id']);
                              $filename = get_the_title($file['id']);
                              if ($file) : ?>
                                 <li class="item">
                                    <?php

                                    //$newStr = end(explode('/', $file['url']));

                                    ?>
                                    <input value="<?php echo $filedir; ?>" type="checkbox" class="checkdownload" id="ch<?php echo $cnt; ?>">
                                    <label for="ch<?php echo $cnt; ?>"><?php echo $filename; ?></label>


                                 </li>
                                 <!--                    <a class="cheker" href="--><?php //echo $file['url']; 
                                                                                    ?>
                                 <!--">--><?php //echo $file['filename']; 
                                          ?>
                                 <!--</a>-->
                              <?php endif; ?>
                        <?php
                           endwhile;

                        // No value.
                        else :
                        // Do something...
                        endif; ?>
                     </ul>
                     <div class="btn-wrap">
                        <button onclick="getCheckedCheckBoxes()" href="#download" class="btn btn-right popup-modal">Download</button>
                     </div>
                  </div>
               </div>

function getCheckedCheckBoxes() {
      var checkboxes = document.getElementsByClassName('checkdownload');
      var checkboxesChecked = [];
      for (var index = 0; index < checkboxes.length; index++) {
         if (checkboxes[index].checked) {
            checkboxesChecked.push(checkboxes[index].value); //
            var sendUrls = (checkboxes[index].value); // 
            //console.log(sendUrls);
         }
      }
      return checkboxesChecked;
   }

Comments

[Марат Иванов]

Спасибо большое!!! сейчас разберемся)

[gogowq]

Марат Иванов, нз. там неважно какой айди у чекбокса,главное задать ему класс "checkdownload" ,в случае моего кода. Он собирает все данные в массив, всех отмеченных чекбоксов . Вам это конечно не совсем подходит,с учёта что у вас должны быть разные массивы,в двух разных кнопках. Либо делать 2 функции,под каждую кнопку,либо же писать код под себя(если нужны данные в каждом item отдельно). Скидывал сугубо для наглядной логики

[Марат Иванов]

Спасибо!