JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<script src="http://cdn.jsdelivr.net/jquery.cookie/1.3/jquery.cookie.js"></script>
<div id="comment-wrapper">
    
<input class="box" type="checkbox" name="myname" />

<label class="option checkbox-label" for="edit-springboard-p2p-personal-campaign-action-show-name">
    Show my name on the campaign page 
</label>
    
</div>

JavaScript

var commentBox = $("#comment-wrapper input[type=checkbox]");

// checkboxes checked / not checked.
$(commentBox).click(function () {
     if ($(this).is(':checked')) {
     $(this).next('label').toggleClass('checked', this.checked).removeClass('not-checked');
    }
  else {
    $(this).next('label').addClass('not-checked').removeClass('checked');
   }
  });

 // Test if checkbox has a default checked value on load.
      var $checkBoxLoad = $(commentBox);
      $checkBoxLoad.each(function() {
        $(this).next("label").toggleClass('checked', this.checked);
      });

// cookies
$(commentBox).each(function() {
  
    var mycookie = $.cookie($(this).attr('name'));
    if (mycookie && mycookie == "true") {
        $(this).prop('checked', mycookie);
    }
});

$(commentBox).change(function() {
    $.cookie($(this).attr("name"), $(this).prop('checked'), {
        path: '/',
        expires: 365
    });
});