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

Question

I'm working on web application project (clinic & laboratory) it's all about sending tests. i used code below to select the test category first then the test name which related in this category. but when i moving to another category. the old one with selected input will reset. who to save them temporary before sending it to data base? i'm still newbie at ajax.

    <?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;
        }

Answer 1

As per your requirement you have to do below changes.

In function file add onchange event

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

In Dashboard file add that javascript function

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(",") );
}