Change checkbox square option to image

Question

I would like to transform the a list of check boxes like the screenshot below

I would like it transformed to

.

Here is a snippet of the HTML code:

Color of latex balloons

#1 Metallic Red

#2 Bright Red

#3 Metallic Burgundy

#4 Burgundy

#5 Pearl Pink

#6 Bubble Gum

#7 Passion Pink

#8 Peach Blush

#9 Pearl Peach

#10 Rose Gold

#11 Metallic Gold

#12 Yellow

#13 Metallic Orange

#14 Orange

#15 Rich Chestnut

Here is the code I have written so far but can't seem to get it to work.

(function() { var uploadUrl = 'https://cdn.test.com/s/files/1/2642/9394/files/';

$.each($('[data-option-name="color-of-latex-balloons"] select'), function() { // make the element "chosen" (note: this is not yet fully compatible with required dropdowns) var $placeholder = $(this).find('input[value=""]'); if ($placeholder.length > 0) { $(this).attr('data-placeholder', $placeholder.text()); $placeholder.text(''); }

$(this).chosen({ width: '100%' }).on('chosen:showing_dropdown', function(e) {
  // display swatches in dropdown
  var $select = $(this);
  var $chosenElement = $(e.currentTarget.nextSibling);

  $.each($chosenElement.find('li'), function() {
    var colorName = $select.find('input').eq($(this).data('value')).val();
    var colorUrl = uploadUrl + colorName.toLowerCase().replace(/ /g, '-') + '.jpg';
    $(this).prepend('<span style="display: inline-block; width: 15px; margin-right: 10px; background-image: url(\'' + colorUrl + '\');"> </span>');
  });
}).on('change', function(e, params) {
  // set the swatch when an option is chosen
  var $chosenElement = $(e.currentTarget.nextSibling);
  var colorName = params.selected;
  var colorUrl = uploadUrl + colorName.toLowerCase().replace(/ /g, '-') + '.jpg';

  $chosenElement.find('.chosen-single span').prepend('<span style="display: inline-block; width: 15px; height: 15px; margin-bottom: -3px; margin-right: 10px; background-image: url(\'' + colorUrl + '\');"> </span>');
});

}); })();

I would appreciate any help.

Answer 1

First you need to create a list of checkboxes with labels or any other tag such as span and add it to a part of the document that you can run with jQuery depending on the usage. After the list of checkboxes and labels was added to the page. It comes down to using the classes given to the labels to set the balloon image for each one, so you need to hide the entire checkbox from the page.

.ballon-checkbox-list input[type="checkbox"] {
  display: none;
}

After this, it is necessary when a checkbox is checked in the labels corresponding to the specified for attribute with a different style so that the user will know what balloon he has chosen to do this with a simple cheer. Has been. This example does not use the image, but the image is rendered in color only when the image url is positioned correctly for each.

let balloonListData = [{
    color: "gray"
  },
  {
    color: "golden"
  },
  {
    color: "red"
  },
  {
    color: "green"
  }
];

let checkBoxList = document.getElementById("balloon_checkbox_list");

for (let balloon of balloonListData) {
  let className = "balloon-color--" + balloon.color;
  let checkboxId = balloon.color + "-balloon";

  let checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.id = checkboxId;

  let label = document.createElement("label");
  label.htmlFor = checkboxId;
  label.className = className;

  checkBoxList.appendChild(checkbox);
  checkBoxList.appendChild(label);
}

      .balloon-checkbox-list input[type="checkbox"] {
        display: none;
      }

      .balloon-checkbox-list input[type="checkbox"]:checked + label {
        box-shadow: 0 0 0 5px #03a9f4;
      }

      .balloon-checkbox-list label {
        height: 34px;
        width: 28px;
        display: inline-block;
        margin: 8px;
        border-radius: 5px;
      }

      .balloon-color--gray {
        background-color: gray;
        /* Use the actual balloon image URL.
        
            background-image: url(images/gray-balloon.png); 
        */
      }

      .balloon-color--golden {
        background-color: yellow;
        /* Use the actual balloon image URL.
        
            background-image: url(images/golden-balloon.png); 
        */
      }

      .balloon-color--red {
        background-color: red;
        /* Use the actual balloon image URL.
        
            background-image: url(images/red-balloon.png); 
        */
      }

      .balloon-color--green {
        background-color: green;
        /* Use the actual balloon image URL.
        
            background-image: url(images/green-balloon.png); 
        */
      }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
  <h1>Choose balloon colors*</h1>
  <div class="balloon-checkbox-list" id="balloon_checkbox_list"></div>
</body>

</html>