JSFiddle - React, Tailwind, and code Playground

HTML

<form method="get" action="">
    <input type="checkbox" id="apple" name="りんご">
    <label for="りんご" class="light">りんご</label>
 
    <input type="checkbox" id="mandarin" name="みかん">
    <label for="みかん" class="light">みかん</label>
 
    <input type="checkbox" id="strawberry" name="イチゴ">
    <label for="イチゴ" class="light">イチゴ</label>
 
    <input type="checkbox" id="gollira" name="ゴリラ">
    <label for="ゴリラ" class="light">ゴリラ</label>
 
    <input type="submit" value="Submit" />
</form>
<div id="show">まだチェックされてません</div>

JavaScript

var $c = $('input[type="checkbox"]');

$c.bind('change', function(){
    var add = '';
    $c.each(function(index, value) {
        if (this.checked){
            add += ($('label[for="' + this.name + '"]').html() + ', ');
        }
    });
    if (add.length > 0) {
        add = add.substring(0, add.length - 2) + '.';
    } else {
        add = 'まだチェックされてません';
    }
    $('#show').html(add);
});