将复选框方形选项更改为图像答案

【问题标题】：Change checkbox square option to image将复选框方形选项更改为图像
【发布时间】：2019-11-13 04:36:25
【问题描述】：

我想像下面的屏幕截图那样转换复选框列表

我想把它改成

这是 HTML 代码的 sn-p：

乳胶气球的颜色

#1 金属红

#2 亮红色

#3 金属勃艮第

#4 勃艮第

#5 珍珠粉

#6 泡泡糖

#7 激情粉红

#8 桃红色腮红

#9 珍珠桃

#10 玫瑰金

#11 金属金

#12 黄色

#13 金属橙

#14 橙色

#15 丰富的栗子

这是我到目前为止编写的代码，但似乎无法让它工作。

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

$.each($('[data-option-name="color-of-latex-balloons"] select'), function() { // 使元素“选择”（注意：这还不完全兼容所需的下拉菜单） 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>');
});

}); })();

我将不胜感激。

【问题讨论】：

这是否解决了您的问题？ Change checkbox check image to custom image
相当。但是，它没有说明如何循环遍历将替换复选框的不同图像。新手问题，对不起，我是 JQuery 新手

标签： javascript jquery jquery-chosen

【解决方案1】：

首先，您需要创建一个带有标签或任何其他标签（例如 span）的复选框列表，并将其添加到文档的一部分，您可以根据使用情况使用 jQuery 运行该部分。在将复选框和标签列表添加到页面后。归结为使用赋予标签的类来为每个标签设置气球图像，因此您需要从页面中隐藏整个复选框。

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

在此之后，有必要在与指定的for属性相对应的标签中选中一个复选框，并使用不同的样式，以便用户通过简单的欢呼就知道他选择了哪个气球来执行此操作。已经。此示例不使用图像，但仅当每个图像的 url 定位正确时，图像才会以彩色呈现。

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>

【讨论】：