javascript - 将复选框方形选项更改为图像-6ren

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

转载作者：行者123 更新时间：2023-12-01 00:27:57

26

4

我想转换复选框列表，如下面的屏幕截图

我希望它变成

.

以下是 HTML 代码片段:

latex 气球的颜色

#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('数据占位符', $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>');
});

});})();

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

最佳答案

首先，您需要创建一个带有标签或任何其他标记(例如 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>

关于javascript - 将复选框方形选项更改为图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58830401/

26

4

0

文章推荐： python - 使用 lxml 重复 XML 元素

文章推荐：单击链接时 PHP 执行文件两次

C程序垂直线不在窗口内打印(方形)
我目前有一个程序，可以简单地在屏幕上绘制一个正方形，但是，我试图向这个正方形添加垂直线，它确实打印到屏幕上，但不是它定义的完整长度，而且不是广场内。任何帮助将不胜感激! #include int m
html -
方形
.products { width: 100%; height: 500px; background: gray; } .box { width: 250px; height: 3
vba - 我需要完全填充字符区域的字符(方形)，并且这两个字符之间没有空格
I need the square-symbolized character have the square shape that fills entire the character's area,
macros - 我是在重新发明(方形)轮子吗？
我们应该知道，Clojure 的 map 可以应用于序列: (map #(* %1 %1) [1 2 3]) ; (1) ..或者多个，通过这种方式: (map vector [0
html - 方形 div 内的纵横比圆
我正在尝试用 HTML/CSS 制作类似这样的东西:https://gyazo.com/6db0d2e3565414c10b65480c5d4b7526 我正在使用一个 Bootstrap 模板，我想
android - 方形 float 操作按钮
当我为我的 fab 设置颜色时，它看起来像这样: 我的布局 xml: 颜色也不会改变。谁能帮助我理解我做错了什么？我也尝试过使用 @color 链接但它崩溃了，背景是可绘制的 (ex. andr
iphone - 圆形图像按钮 VS 方形 Controller
我有一个带有圆形图像的自定义按钮。问题是 Controller 默认是方形的，所以每当我单击图像的角时，按钮都会响应调用关联的方法，而实际上他不应该这样做，因为角上没有图像，所以按钮不应响应。有人
CSS Box-Shadow 裁剪/方形
您好，我的页面顶部有一个 div http://www.uk-sf.com/MyTraining.php box-shadow 被切割在 wrapper 上，我试着给它一个 z-index 但没有任何
javascript - 带有侧箭头的 CSS 方形 div
我有一个包含图像的 div。此图像仅在元素悬停时显示，因此我希望侧箭头从指向侧面的 div 出来(在元素悬停的方向)。此代码生成正方形 div: CSS: #image-t
android - 如何制作 android imageview 方形？
我在 Android 项目中使用 ImageView。宽度:match_parent高度:wrap_content 然后我将它缩放到 fill_XY，但图像还不是正方形...我该怎么办？最佳答案
css - Flexbox，方形 div 的响应式网格保持纵横比
我正在尝试使用 div 创建一个 2x2 网格。一些 div 可能包含图像，但它可能会被设置为背景，选项为 background-size: cover。这是我创建的笔:http://codepen
html - 如何将元素锁定到容器(方形)中的 div 底部？
* { box-sizing: border-box; } .publication { display: flex;
android - 如何使用 layout_weight 使宽度和高度 [方形] 大小相等？
我有以下代码: 结果: 如何使 View 的高度与其宽度相等(由 layout_weight 产生)？最佳答案您必须重写 onMeasure 方法，将高度设置为与高度相
ios - 如何将 UIScrollView 设置为 3D 方形
我正在开发照片编辑应用程序，我有 3 个带有 UIImageview 的 ScrollView ，我想将 ScrollView 设置如下我试过“Scenekit”，但它不起作用，因为我想要 Scro
javascript - 如何在不使用 SVG 图像的情况下使用带有文本的 React 创建圆形/方形？
在不使用 SVG 图像的情况下，使用 React 可以在其中包含自定义文本来创建圆形和方形的方法是什么？一个例子: 我尝试了以下代码，但它没有呈现任何形状: import React from 're
html - 无滚动条的响应式 3*3 方形 div 网格
我想要一个没有滚动条的响应式 9x9 div 网格。 div 网格应根据可见的浏览器窗口调整大小。我合并了"How to maintain the aspect ratio of a div usin
java.lang.NoClassDefFoundError : com. 方形.picasso.Picasso
我第一次尝试使用Picasso 如官方网站示例: private void setItemBgImageUsingPicasso(View convertView) { String imag
android - 方形/ Dagger 。安卓。 java.lang.StackOverflowError 错误
尝试为 Android 使用 Dagger 依赖注入(inject)器。这是扩展的应用程序类: public class MyApplication extends Application {
css - Bootstrap 3 : How to create responsive, 方形 .thumbnail div
我使用 Bootstrap 3 的 .thumbnail 类创建了一个图像网格。在调整图像大小和根据窗口大小更改列方面，一切似乎都很好。唯一的问题是图像的大小各不相同，并且纵向/横向都是。这会导致缩略
ios - 方形 API + OAuth2 : How do I set my redirect URL to my iOS app?
我正尝试通过 Square 在我的 iOS 应用程序中实现 OAuth2，但它说当我通过弹出的浏览器成功登录时，我的 redirect_uri 出现错误。我正在使用 OAuthSwift pod。这

首页

博学

6Ren·AI

商城

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