JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sizer">
    <form action="#" method="get" accept-charset="utf-8">
        <fieldset class="checkboxes">
            <label class="label-check" for="checkbox-01"><input name="sample-checkbox-01" id="checkbox-01" value="1" class="checkall" type="checkbox" checked /> Tümü </label>
            <label class="label_check" for="checkbox-02"><input name="sample-checkbox-02" id="checkbox-02" value="2" type="checkbox" /> Please send me regular updates.</label>
            <label class="label_check" for="checkbox-03"><input name="sample-checkbox-03" id="checkbox-03" value="3"  type="checkbox" />I agree to the terms &#38; conditions.</label>
        </fieldset>
    </form>
    <div id="footer">
        <a href="http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/">&#8592; Full how-to article</a>
        <a href="demo.html">Old school JavaScript &#8594;</a>
    </div>
</div>

CSS

* { margin: 0; padding: 0; }

html        { font: 14px/18px 'HelveticaNeue-Light', 'Helvetica Neue', Arial, Helvetica, sans-serif; color: #fff; background: url(noise.png); }
a:hover, a:active { outline: none; }
#sizer      { width: 340px; margin: 0 auto; padding: 144px 200px 240px; background: url(highlight.png) no-repeat 50% 0; }
form        { width: 300px; padding: 18px 20px 0; margin-bottom: 18px; background: #4f84b8 url(box-grad.png) repeat-x 0 0; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; box-shadow: 0 5px 12px rgba(0,0,0,.4); -webkit-box-shadow: 0 5px 12px rgba(0,0,0,.4); -moz-box-shadow: 0 5px 12px rgba(0,0,0,.4); -khtml-box-shadow: 0 5px 12px rgba(0,0,0,.4); }
fieldset    { border: 0; padding-bottom: 9px; }
label       { display: block; cursor: pointer; line-height: 20px; padding-bottom: 9px; text-shadow: 0 -1px 0 rgba(0,0,0,.2); }
.radios     { padding-top: 18px; background: url(divider.png) repeat-x 0 0; }
.label_check input,
.label_radio input  { margin-right: 5px; }
#footer     { width: 100%; text-align: center; font-size: 12px; }
#footer a   { padding: 2px 10px; margin: 0 2px; color: #999; background: #ddd; text-decoration: none; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; }
#footer a:hover,
#footer a:focus { color: #fff; background: #333; background: rgba(0,0,0,.3); }

.label_check,
.has-js .label_radio    { padding-left: 34px; }
.has-js .label_radio    { background: url(http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/radio-off.png) no-repeat; }
.has-js .label_check    { background: url(http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/check-off.png) no-repeat; }
.has-js label.c_on      { background: url(http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/check-on.png) no-repeat; }
.has-js label.r_on      { background:...

JavaScript

function initCheckBoxes()
{
    if ($('.label-check input').length) {
        $('.label-check').each(function() {
            var $this = $(this);
            if ($this.find('input').prop('checked')) {
                $this.addClass('c-on');
            }
            $this.click(function() {
                if ($this.find('input').prop('checked')) {
                    $this.addClass('c-on');
                } else {
                    $this.removeClass('c-on');
                }
            });
        });
    };
    
    $('.checkall').click(function () {
$(this).parents('p:eq(0)').find(':checkbox').attr('checked', this.checked);
    
}