JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<form action="#">

  <div class="checkbox-lie">
    <input type="checkbox" class="checkbox-lie-input">  
    
    <div class="checkbox-lie-content">
      <div class="checkbox-lie-box"></div>
      <label for="#">something</label>
    </div>
  </div>


  <div class="checkbox-lie">
    <input type="checkbox" class="checkbox-lie-input">  
    
    <div class="checkbox-lie-content">
      <div class="checkbox-lie-box"></div>
      <label for="#">something</label>
    </div>
  </div>

</form>

CSS

.checkbox-lie-input{
  display: none;
}

.checkbox-lie-box{
  border: 1px solid black;
  width: 20px;
  height: 20px;
}

JavaScript

function lies(){
	$items = $('.checkbox-lie');
  for(var i = 0; i < $items.length; i++){
  	$items.eq(i).find('.checkbox-lie-box').click(function(){
    	$('.checkbox-lie').removeClass('active');
      $('.checkbox-lie').find('.checkbox-lie-input').attr('checked', false);
    	$(this).parentsUntil('.checkbox-lie').parent().toggleClass('active');
      	var c = false;
      if(
    	$(this).parentsUntil('.checkbox-lie').parent().hasClass('active')){
      	c = true;
      }else{
       c = false;
      }
      
    	$(this).parentsUntil('.checkbox-lie').parent().find('.checkbox-lie-input').attr('checked', c.toString());
    })
  }
}

$(document).ready(function(){
	if($('.checkbox-lie').length){
  	lies();
  }
  
  $('form').on({
  	submit: function(e){
    e.preventDefault();
    	console.log($('.checkbox-lie-input'));
    }
  })
})