简体   繁体   English

如何从复选框中获取选定的多个值并以表单形式提交以获取匹配的搜索结果

[英]How to get the selected multiple values from checkbox and submit them in a form to get the matched search results

This form contains a dropdown list that has multiple options with checkboxes, now when a user selects 1 or more checkboxes and presses submit, the values should be processed with the matching search results.此表单包含一个下拉列表,其中包含多个带有复选框的选项,现在当用户选择 1 个或多个复选框并按下提交时,应使用匹配的搜索结果处理这些值。 Previously, I had a select tag with an option tag that was used to get the results.以前,我有一个select标签和一个用于获取结果的option标签。 Now, since I added the functionality of searching for more than one option, I added checkboxes, but now I am not sure how to get the results.现在,由于我添加了搜索多个选项的功能,我添加了复选框,但现在我不确定如何获得结果。

Html and Php Code Html 和 Php 代码

<form action="<?php the_permalink() ?>" class="ajax-search-form leaders-header" id="searchform" method="post" role="search">
        <?php get_template_part( 'blocks/leaderboard/search-form' ) ?>
        <div class="sort">

        <body>
        <?php if ($departments = get_field_object('field_5da06da87ae0f')) : ?>
        <div class="sort-item">
        <div id="list1" class="dropdown-check-list" tabindex="100">
            <span class="anchor" style="font-size: small">All Departments</span>
            <ul id="items" class="items" name="department" >
                <label for="test">
                <?php foreach ($departments['choices'] as $key => $department) : ?>
                    <input type="checkbox" name="check" id="test" value="unchecked" /> <option style="font-size: small" <?php if ( isset($_REQUEST['role']) and $_REQUEST['role'] == $key) echo 'selected' ?> value="<?php echo $key; ?>">

                        <?php echo $department; ?></option></label></br>

                <?php endforeach; ?>

                <input style="font-size: small" type="submit" value="Submit" "/>
            </ul>
        </div>
        </div>
        <?php endif ?>
        </body>

JavaScript: JavaScript:

<script type="text/javascript">

            var checkList = document.getElementById('list1');
            var items = document.getElementById('items');
            var isChecked = document.getElementById('items').checked;
            checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
                if (items.classList.contains('visible')){
                    items.classList.remove('visible');
                    items.style.display = "none";
                }
                else{
                    items.classList.add('visible');
                    items.style.display = "block";
                }

            }

            items.onblur = function(evt) {
                items.classList.remove('visible');
            }


        </script>

Problem is that every checkbox will have the same name and id so you will be not able to recognize which option belongs to which checkbox but you can try something like this问题是每个复选框都将具有相同的名称和 ID,因此您将无法识别哪个选项属于哪个复选框,但您可以尝试这样的事情

<?php foreach ($departments['choices'] as $key => $department) : ?>
                    <input type="checkbox" name="<?= $department ?>" id="<?= $department ?>" value="unchecked" />

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM