JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" id="f_id" action="Javascript:void(0);" >
    <input type="checkbox" id="all_color" name="all_color" value="All" onclick="send_data_requests()" checked>All<br>
    <input type="checkbox" id="color_red" name="color_red" value="Red" onclick="send_data_requests()">Red<br>
    <input type="checkbox" id="color_blue" name="color_blue" value="Blue" onclick="send_data_requests()">Blue<br>
</form>

<div id="data_areas">

JavaScript

$("#f_id").submit(send_data_requests());

$('#all_color').click(function () {   
     $(this).prop("checked", "checked");
     $('input:checkbox').not(this).prop('checked', !this.checked);           
 });

$("#color_red, #color_blue").click(function() {
    $('#all_color').removeAttr('checked');
});

function send_data_requests()
    {
        $('#data_areas').hide();
        $.ajax
            (
                {
                    url: 'datas.php',
                    type: 'POST',
                    data: $('#f_id').serialize(),
                    cache: false,
                    success: function(data)
                        {
                            $('#data_areas').show();
                            $('#data_areas').html(data);
                        }
                }
            );
        return false;
    }
// on load page call function code //
$(document).ready(send_data_requests());