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

Question

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

我想将其转换为

.

这是 HTML 代码的片段：

乳胶气球的颜色

#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($('[数据选项名称="color-of-latex-balloons"] select'), function() { // 使元素 "chosen" （注意：这还不完全兼容所需的下拉菜单） var $placeholder = $(this).find('input[value=""]'); 如果 ($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>');
});

}); })();

如有任何帮助，我将不胜感激。

Answer 1

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

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

在此之后，有必要在与具有不同样式的指定属性相对应的标签中选中一个复选框，以便用户知道他选择了哪个气球来简单地欢呼。一直。此示例不使用图像，但只有当每个图像 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>

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

Change checkbox square option to image

javascript

jquery

jquery-chosen