JSFiddle - React, Tailwind, and code Playground

by Mehmet Alp

HTML

<label>
<li>
<input type="checkbox" value="0">
<span>ilk checkbox</span>
</li>
</label>
    <label>
<li>
<input type="checkbox" value="1">
<span>2 checkbox</span>
</li>
</label>
        
    <label>
<li>
<input type="checkbox" value="2">
<span>3 checkbox</span>
</li>
</label>
        
    <label>
<li>
<input type="checkbox" value="3">
<span>4 checkbox</span>
</li>
</label>
        
        <div class="burayayaz">Seçiniz</div>

JavaScript

function Guncelle(){
        var tumSecilenler = [];
        $('label :checked').each(function () {
            tumSecilenler.push($(this).val());
        });
        $('.burayayaz').empty().append(tumSecilenler + ",");
    }
    $('input[type="checkbox"]').click(function () {
        if ($('input[type="checkbox"]').is(':checked')) {
            Guncelle();
        } else {
            $(".burayayaz").html("Seçiniz");
        }
    });