JSFiddle - React, Tailwind, and code Playground

by showcode

HTML

<body>
    Hobbies:
    <input type="checkbox" id="c1" name="test" value="cricket" />
    <label for="cb-cricket">Cricket</label>
    <input type="checkbox" id="c2" name="test" value="swimming" />
    <label for="cb-swimming">Swimming</label>
    <input type="checkbox" id="c3" name="test" value="blog" />
    <label for="cb-blog">Blog</label>
    <input type="checkbox" id="c4" name="test" value="coding" />
    <label for="cb-coding">Coding</label>
    <br/>
    <br/>
    Selected checkbox:<br />
    <div id="divchecked"></div>
</body>

JavaScript

$(document).ready(function () {
            $('input[type="checkbox"]').click(function () {
                getSelectedCheckBoxwithValueText("test")               
            });
            var getSelectedCheckBoxwithValueText = function (name1) {
                var data = $('input[name="' + name1 + '"]:checked');
                if (data.length > 0) {
                    var resultdata='' ;
                    data.each(function () {
                        var selectedValue = $(this).val();
                         resultdata += $('label[for="cb-' + selectedValue + '"]').text() + "<br/>";
 
                    });
                    $("#divchecked").html(resultdata);
                }
                else {
                    $("#divchecked").html("No Check box selected");
                }
                
 
            };
        });