如何保存/保持选中复选框?

时间:2020-06-02 17:37:50

标签: javascript php html ajax azure-web-app-service

我正在研究Web应用程序项目(诊所和实验室),这全都与发送测试有关。我使用下面的代码首先选择测试类别,然后选择与此类别相关的测试名称。但是当我转到另一个类别时。具有选择输入的旧键盘将重置。谁在将它们发送到数据库之前临时保存它们?我仍然是ajax的新手。

enter image description here

    <?php
// Dashboard page
        include('CONFIG.PHP');
        $query = "SELECT * FROM `test_categories` ORDER BY `test_categories`.`CATEGORY_ID` DESC";
        $statement = $connect->prepare($query);
        $statement->execute();
        $result = $statement->fetchAll();
        foreach($result as $row)
        {
        ?>
        <div class="">
        <label>
        <input  type="checkbox" class="common_selector category" value="<?php echo $row['CATEGORY_NAME']; ?>"> 
        <?php echo $row['CATEGORY_NAME']; ?></label>
        </div>
        <?php
        }
        ?>

    ===============================================
        <script>
        $(document).ready(function(){

            filter_data();

            function filter_data()
            {
                $('.filter_data').html('<div id="loading" style="" ></div>');
                var action = 'fetch_data';
                var brand = get_filter('category');
                $.ajax({
                    url:"FUNCTIONS.PHP",
                    method:"POST",
                    data:{action:action, category:category},
                    success:function(data){
                        $('.filter_data').html(data);
                    }
                });
            }

            function get_filter(class_name)
            {
                var filter = [];
                $('.'+class_name+':checked').each(function(){
                    filter.push($(this).val());
                });
                return filter;
            }

            $('.common_selector').click(function(){
                $('input').not(this).prop('checked', false);
                filter_data();
            });
        });
        </script>


    ==========================================
    // FUNCTIONS PAGE

        if(isset($_POST["action"]))
        {
            include 'CONFIG.PHP';
            $query = "";
            if(isset($_POST["category"]))
            {
                $category_filter = implode("','", $_POST["category"]);
                $query .= "
                SELECT * FROM `tests` WHERE TEST_CATEGORY = ('".$category_filter."') ORDER BY `tests`.`TEST_ID` DESC
                ";
            }


            $statement = $connect->prepare($query);
            $statement->execute();
            $result = $statement->fetchAll();
            $total_row = $statement->rowCount();
            $output = '';
            if($total_row > 0)
            {
                foreach($result as $row)
                {
                    $output .= "


                    <div class='TEST'>
        <input id='toggle". $row['TEST_ID']."' name='REQUESTED_TEST[]' type='checkbox' value='" . $row['TEST_NAME'] . "'>
        <label for='toggle". $row['TEST_ID']."'>" . $row['TEST_NAME'] . "</label>
        </div>

                    ";
                }
            }
            else
            {
                $output = '<h3 class="text-center">'. LANG('NO_DATA_FOUND').'</h3>';
            }
            echo $output;
        }

1 个答案:

答案 0 :(得分:0)

根据您的要求,您必须执行以下更改。

在功能文件中添加onchange事件

<input class='selected_test' id='toggle". $row['TEST_ID']."' name='REQUESTED_TEST[]' type='checkbox' value='toggle" . $row['TEST_ID'] . "' onchange=\"updatetests()\">

在仪表板文件中添加该javascript函数

function updatetests(){
    var oldval = $('input[name=seltests]').val();
    var seltests = [];
    if( oldval != "" ) {
        seltests = $('input[name=seltests]').val().split(',');
    }
    jQuery.each( jQuery('.selected_test:checked'), function( i, val ) {
      seltests.push($(this).val());
    });
    seltests = seltests.filter((v, i, a) => a.indexOf(v) === i);
    $('input[name=seltests]').val( seltests.join(",") );
}