JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<input class="switch" type="checkbox" name="slider1" value="yes" id="slider1" checked="true" data-true-text="Yes" data-false-text="No" />

CSS

input[type="checkbox"].switch {
  display: none;
}

.toggle {
    box-sizing: border-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background-color: #e6e6e6;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(25%, white), to(#e6e6e6));
  background-image: -webkit-linear-gradient(white, white 25%, #e6e6e6);
  background-image: -moz-linear-gradient(top, white, white 25%, #e6e6e6);
  background-image: -ms-linear-gradient(white, white 25%, #e6e6e6);
  background-image: -o-linear-gradient(white, white 25%, #e6e6e6);
  background-image: linear, top, white, white 25%, #e6e6e6;
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#e6e6e6', GradientType=0);
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);
  border: 1px solid #ccc;
  color: white;
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  line-height: 18px;
  height: 26px;
  overflow: hidden;
  position: relative;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  width: 75px;
}

.toggle.false {
  background-color: #bd362f;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#bd362f));
  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #bd362f));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
  background-repeat: repeat-x;
  filter:...

JavaScript

/* Add toggle switch after each checkbox.  If checked, then toggle the switch. */
   $('input[type="checkbox"].switch').after(function(){
     if ($(this).is(":checked")) {
       return "<a href='#' class='toggle true' ref='"+$(this).attr("id")+"' data-true-text='"+$(this).attr("data-true-text")+"' data-false-text='"+$(this).attr("data-false-text")+"'>"+$(this).attr("data-true-text")+"</a>";
     }else{
       return "<a href='#' class='toggle false' ref='"+$(this).attr("id")+"' data-true-text='"+$(this).attr("data-true-text")+"' data-false-text='"+$(this).attr("data-false-text")+"'>"+$(this).attr("data-false-text")+"</a>";
     }
   });
   
   /* When the toggle switch is clicked, check off / de-select the associated checkbox */
  $('.toggle').click(function(e) {
    
    var trueText = $(this).attr("data-true-text");
    var falseText = $(this).attr("data-false-text");
    var checkboxID = $(this).attr("ref");
    var checkbox = $('#'+checkboxID);
    var currentText = $(this).text();

    // Change the checkbox
    if (checkbox.is(":checked")) {
       checkbox.removeAttr("checked");
    } else{
       checkbox.attr("checked","true");
    }

    // Change the Link Text
    $(this).text( currentText == trueText ?  falseText : trueText);

    // Change the toggle class
   $(this).toggleClass("true false");

   e.preventDefault();
  });