JSFiddle - React, Tailwind, and code Playground

by iamjpg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="labelsmack">
  <input type="checkbox" id="foo" name="foo" value="bar">
  <label for="foo">Foo</label>
</div>
<br />
<br />
<div class="labelsmack">
  <input type="checkbox" id="baz" name="baz" value="bar">
  <label for="baz">Baz</label>
</div>
<br />
<br />
<div class="labelsmack">
  <input type="radio" name="bop" value="flop">
  <label>Flop</label>
</div>
<div class="labelsmack">
  <input type="radio" name="bop" value="flap">
  <label>Flap</label>
</div>

CSS

.labelsmack {
  width: 100%;
  background: #CCC;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
}

.labelsmack label,
.labelsmack input {
  cursor: pointer;
}

JavaScript

(function($) {

  $.fn.labelsmack = function(options) {
  
  	console.log(this)

    var settings = $.extend({
      'background': '#CCC',
      'padding': '10px'
    }, options);

    var elems = $('.labelsmack');
    
    elems.css(settings);

    elems.each(function(i, o) {
      var elem = $(o);

      $(this).find('label').removeAttr('for');

      elem.on('click', function(e) {
        var target = $(e.target);
        var self = $(this);
        var input = self.find('input');

        if (input.is(':checkbox') && !target.is(':checkbox')) {
          var wut = (input.is(':checked')) ? false : true;
          input.prop('checked', wut);
        } else if (input.is(':radio') && !target.is(':radio')) {
          input.prop('checked', true);
        }
      })
    });

  };

}(jQuery));

$.fn.labelsmack()