JSFiddle - React, Tailwind, and code Playground

HTML

<div class="heading"><a id="txt" href="" class="select_all">Select All</a></div>
                        <div class="txt">
                                <label class=> Data1
                                    <input type="checkbox" name="p" value="data1" />
                                </label>
                                <label> Data2
                                    <input type="checkbox" name="a" value="data2" />
                                </label>
                        </div>

JavaScript

$(document).ready(function() {    
    
    
    
    if ($(".select_all").length > 0) {
        $(".select_all").click(function() {
            
            var id = $(this).attr('id');
            
            if ($(this).hasClass('selected')) {
                $('.' + id).find('input').attr('checked', false);
                $(this).removeClass('selected');
            } else {
                $('.' + id).find('input').attr('checked', true);
                $(this).addClass('selected');
            }            
            
            return false;
        });
    }


});