jquery - 让 div 像复选框一样工作

Question

我有一个带有复选框的颜色名称列表。我希望能够选择带有标题的整个 div，而不是在那里放置复选框。选中的 div 将使用不同的背景颜色来理解。

我的 html 也是 erb 文件并包含 ruby。我希望 <%= color.name %> 位于“idea[color_ids][]” id div 中。但是当我尝试将它们放在一起时，我得到了一个rails错误

.html/erb 文件

  <ul class="multi-column-checkbox">
        <% for color in Color.master_colors %>
            <li><%= check_box_tag "idea[color_ids][]", color.id,   
@idea.colors.include?(color) %> <%= color.name %></li>
        <% end %>
      </ul>

如何在“idea[color_ids][]”div 中获取 color.names 而不是在 li div 中获取？这样我就可以选择整个“idea[color_ids][]”（里面有颜色名称标题）？

score 1 · Accepted Answer

你可以尝试这样的事情：

<label for="check1">
  <input type="checkbox" name="check" id="check1" /> Testing
</label>

然后您可以将标签视为 div 或在标签内添加 div-wrapper。

score 0 · Accepted Answer

看起来您想自定义样式您的复选框。

隐藏复选框：

.multi-column-checkbox input[type="checkbox"] {
    visibility: hidden;
}

将 css 样式（css 类）添加到您的 'li' 说 'column-checkbox'

 .column-checkbox{
     width: .. px;
     height: .. px;
     background-color: some_color;
     borders...
     **position: relative;**
 }

将样式添加到您的复选框标签

.column-checkbox label {
    **position: absolute;**
    /* top, bottom, left, right */ 
    width: ...;
    height: ...;
    /* etc */
}

选中复选框后为标签设置样式

.column-checkbox label:after {
    /* Styles after select */
}

您还可以在列表项上添加悬停样式

.column-checkbox label:hover{
    /* Hover styles */
}

您可能可以在网上找到自定义 CSS 复选框的示例。另外，看看这个答案：How to style checkbox using CSS?

jquery - 让 div 像复选框一样工作

2 回答 2

Related

Reference