JSFiddle - React, Tailwind, and code Playground

by Dalin Huang

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="masonry">
  <div class="item">
    <input type="checkbox" name="thing_1" value="valuable" id="thing_1">
    <label for="thing_1"><img class="img-responsive" src="http://independentskies.com/wp-content/uploads/2013/11/428126-3732x2655.jpg"></label>
  </div>
  <div class="item">
    <input type="checkbox" name="thing_2" value="valuable" id="thing_2">
    <label for="thing_2"><img class="img-responsive" src="http://viajescasaquinta.com/wp-content/uploads/2016/11/Grecia.jpg"></label>
  </div>
  <div class="item">
    <input type="checkbox" name="thing_3" value="valuable" id="thing_3">
    <label for="thing_3"><img class="img-responsive" src="http://www.venamimundo.com/Europa/Grecia/Grecia-02.jpg"></label>
  </div>
  <div class="item">
    <input type="checkbox" name="thing_4" value="valuable" id="thing_4">
    <label for="thing_4"><img class="img-responsive" src="http://www.o1visa.com/wp-content/uploads/2016/01/ia-oia-santorini-grecia.jpg"></label>
  </div>
  <div class="item">
    <input type="checkbox" name="thing_5" value="valuable" id="thing_5">
    <label for="thing_5"><img class="img-responsive" src="http://www.turismogrecia.info/images/in/grecia-turquia.jpg"></label>
  </div>
  <div class="item">
    <input type="checkbox" name="thing_6" value="valuable" id="thing_6">
    <label for="thing_6"><img class="img-responsive" src="http://best5.it/b5/wp-content/uploads/2013/12/Grecia-antica-5-date-memorabili-1-800x400-800x400.jpg"></label>
  </div>
  <div class="item">
    <input type="checkbox" name="thing_7" value="valuable" id="thing_7">
    <label for="thing_7"><img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/ec/4a/5d/ec4a5d6dbf78a843711442c99ac6d34a.jpg"></label>
  </div>
  <div class="item">
    <input type="checkbox" name="thing_8" value="valuable" id="thing_8">
    <label for="thing_8"><img class="img-responsive"...

CSS

.item img {
  max-width: 200px;
}

.item {
  float: left;
}

JavaScript

var urls = [];
jQuery('body').on('change', '.masonry .item :checkbox', function() {
  if ($('input[type=checkbox]:checked').length > 6) {
    alert("Puoi aggiungere un massimo di 6 immagini");
    var $checkbox = $(this);
    // Ensures this code runs AFTER the browser handles click however it wants.
    setTimeout(function() {
      $checkbox.removeAttr('checked');
    }, 0);
    event.preventDefault();
    event.stopPropagation();
  } else {
	  urls = [];
    jQuery('.masonry .item :checkbox:checked').each(function() {
      urls.push(jQuery(this).next('label').find('img').attr('src'));
    });
  }
	console.log('this urls-->' + urls);
	console.log('this urls length-->' + urls.length);
});