Формирование запроса на вызов API из флажка с помощью jquery

Question

У меня есть вывод HTML в этом, я должен сформировать строку, которая используется для моего запроса API в качестве параметра. Ниже я дал мой вывод HTML:

<div class="right-filter-inner p-2">
<div class="right-inner-PROCESSING_TIME">
    <h4>PROCESSING_TIME</h4>
        <div class="top-checks rgt-report-sector" data-simplebar="init">
            <div class="simplebar-track vertical" style="visibility: visible;">
                <div class="simplebar-scrollbar" style="top: 2px; height: 25px;"></div>
            </div>
            <div class="simplebar-track horizontal" style="visibility: hidden;">
                <div class="simplebar-scrollbar"></div>
            </div>
            <div class="simplebar-scroll-content" style="padding-right: 17px; margin-bottom: -34px;">
                  <div class="simplebar-content" style="padding-bottom: 17px; margin-right: -17px;">
                            <div class="filter-metrics">
                                <label class="custom-control">
                                    <input type="search" class="material-control-input filter-search" id="top-filter-search-PROCESSING_TIME">
                                </label>
                                <label class="custom-control material-checkbox filter-label">
                                    <input type="checkbox" class="material-control-input top-filter-all" value="all" checked="">
                                    <span class="material-control-indicator"></span>
                                    <span class="material-control-description">All</span>
                                </label>
                                <label class="custom-control material-checkbox filter-label">
                                    <input type="checkbox" name="PROCESSING_TIME" class="material-control-input filter-option top-filter-20181001" value="2018-10-01" id="top-filter-20181001" checked="">
                                    <span class="material-control-indicator"></span>
                                    <span class="material-control-description">2018-10-01</span>
                                </label>
                                <label class="custom-control material-checkbox filter-label">
                                    <input type="checkbox" name="PROCESSING_TIME" class="material-control-input filter-option top-filter-20181002" value="2018-10-02" id="top-filter-20181002" checked="">
                                    <span class="material-control-indicator"></span>
                                    <span class="material-control-description">2018-10-02</span>
                                </label>
                                <label class="custom-control material-checkbox filter-label">
                                    <input type="checkbox" name="PROCESSING_TIME" class="material-control-input filter-option top-filter-20180918" value="2018-09-18" id="top-filter-20180918" checked="">
                                    <span class="material-control-indicator"></span>
                                    <span class="material-control-description">2018-09-18</span>
                                </label>
                                <label class="custom-control material-checkbox filter-label">
                                    <input type="checkbox" name="PROCESSING_TIME" class="material-control-input filter-option top-filter-20180830" value="2018-08-30" id="top-filter-20180830" checked="">
                                    <span class="material-control-indicator"></span>
                                    <span class="material-control-description">2018-08-30</span>
                                </label>
                            </div>
                     </div>
                </div>
            </div>
        </div>
        <div class="right-inner-DSPID">
            <h4>DSPID</h4>
                <div class="top-checks rgt-report-sector" data-simplebar="init">
                        <div class="simplebar-track vertical" style="visibility: visible;">
                            <div class="simplebar-scrollbar" style="top: 2px; height: 25px;"></div>
                        </div>
                        <div class="simplebar-track horizontal" style="visibility: hidden;">
                            <div class="simplebar-scrollbar"></div>
                        </div>
                        <div class="simplebar-scroll-content" style="padding-right: 17px; margin-bottom: -34px;">
                            <div class="simplebar-content" style="padding-bottom: 17px; margin-right: -17px;">
                                    <div class="filter-metrics">
                                        <label class="custom-control material-checkbox filter-label">
                                            <input type="checkbox" name="DSPID" class="material-control-input filter-option top-filter-1" value="-1" id="top-filter-1" checked="">
                                            <span class="material-control-indicator"></span>
                                            <span class="material-control-description">-1</span>
                                        </label>
                                    </div>
                            </div>
                        </div>
                </div>
        </div>
</div>

с этим HTML, я должен сформироватьЗапрос как,

PROCESSING_TIME in ('checkedval1','checkedval2','checkedval3'),DSPID in ('checedval1')

Моя скрипка

Я пытался в конце, но я поражен в точке, чтобы сформировать запрос из проверенных значений. Никто не поможет мневне.

Answer 1

Вы начали правильно, но тогда вам нужно будет найти все элементы, которые связаны с каждым <H4>, который вы найдете. Я бы использовал массивы в качестве базы, так как они могут быть легко соединены с разъемами по вашему выбору, например. используя array.join(',').

Код:

function buildFilter() {

var arrElements = [];
 $('.right-filter-inner').find('h4').each(function(i) {
   var filter = $(this).text();
   var arrChecked = [];
   $('.right-inner-' + filter + ' .material-control-input:checked').each(function() {
     console.log(this);
     arrChecked.push("'" + ($(this).val()) + "'");
   });
   var strFilter = arrChecked.join(',');
   // build a filter list for one filter
   arrElements.push(filter + ' IN ('+ strFilter +')');
 });

 // combine the different filters 
 $('#result').html(arrElements.join(','));
}

buildFilter();

Вот обновленная Fiddle , которая показывает, как это работает. Просто отметьте и снимите флажки со значений и нажмите кнопку, чтобы увидеть измененную строку фильтра.