时间戳

首页 > 解决方案 > 使用 jquery 从复选框形成 API 调用请求

jquery - 使用 jquery 从复选框形成 API 调用请求

问题描述

我有 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')

我的小提琴

我已经尝试过了，但我对从检查值提出请求感到震惊。任何人都可以帮助我。

标签： jquerycheckbox

解决方案

您一开始是正确的，但随后需要找到与<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，它显示了它是如何工作的。只需选中和取消选中值，然后单击按钮即可查看更改的过滤器字符串。

推荐阅读