6

我正在尝试通过像这样设置 html 来制作颜色选择器:

<ol class="kleurenkiezer list-reset clearfix">
    <li>
        <input type="radio" id="kleur_wit" name="kleurenkiezer" value="wit">
        <label for="kleur_wit" style="background: white;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_creme" name="kleurenkiezer" value="creme">
        <label for="kleur_creme" style="background: #fffceb;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_lichtbruin" name="kleurenkiezer" value="lichtbruin">
        <label for="kleur_lichtbruin" style="background: #968272;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_bordeauxrood" name="kleurenkiezer" value="bordeauxrood">
        <label for="kleur_bordeauxrood" style="background: #941514;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_oudgroen" name="kleurenkiezer" value="oudgroen">
        <label for="kleur_oudgroen" style="background: #7fa298;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_lichtblauw" name="kleurenkiezer" value="lichtblauw">
        <label for="kleur_lichtblauw" style="background: #487eae;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_oudgeel" name="kleurenkiezer" value="oudgeel">
        <label for="kleur_oudgeel" style="background: #b79130;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_zwart" name="kleurenkiezer" value="zwart">
        <label for="kleur_zwart" style="background: #000;"></label>
    </li>
</ol>

我正在尝试做的是使实际的单选按钮对用户不可见,并使标签可点击,以便我有一个整齐的彩色方块列表,您可以从中选择一个。现在我的单选按钮似乎没有被选中.. 为什么会这样?

我的CSS:

.kleurenkiezer {
        width: 165px;
        margin-left: -10px;
        float: right;
    }

.kleurenkiezer li {
    position: relative;

    width: 45px;
    height: 45px;
    margin: 0 0 10px 10px;
    border: 1px solid #bbbbbb;

    float: left;
}

.kleurenkiezer li input {
    position: absolute;
    top: 10px;
    left: 10px;

    z-index: 1000;
}

.kleurenkiezer li label {
    position: absolute;
    top: 0;
    left: 0;

    width: 43px;
    height: 43px;
}
4

5 回答 5

4

真正老问题的新答案.. :) 不确定这是您的情况,但是当单击页面上的标签时,我正在尝试相同的确切问题,其中有 2 个重复表单,其中 2 个始终隐藏。一个用于移动设备的页面区域,另一个用于桌面设备。

第一个出现在 html 流上的工作正常,另一个没有。假例子,见 js fiddle:

<input type="radio" id="value-1" name="sort"/>
<label for="value-1">value 1</label>
<input type="radio" id="value-2" name="sort"/>
<label for="value-2">value 2</label>


<input type="radio" id="value-1" name="sort"/>
<label for="value-1">value 1</label>
<input type="radio" id="value-2" name="sort"/>
<label for="value-2">value 2</label>

https://jsfiddle.net/stratboy/8ua16gm3/1/

所以现在,对我来说,这里的诀窍是找到一种避免表单重复的方法。

于 2016-03-08T11:06:52.320 回答
0

单选按钮对我有用。您可以在 css display:none 中设置输入复选框:

.kleurenkiezer input[type=radio] {
  display:none
}
于 2013-07-17T12:53:10.107 回答
0

simple_form_for()我在移动视图和桌面视图中遇到了与@Luca(可能还有 OP)相同的问题。移动和桌面输入具有导致问题的重复 ID。我最终:namespace在移动视图表单中使用:

<%= simple_form_for(:registration, namespace: "mobile") do |f| %>

命名空间生成的 id 是唯一的,之后我的单选按钮工作正常。

于 2021-08-20T18:39:24.490 回答
0

对于同一件事(颜色选择器),我使用了另一种方法,我认为它更简单。只需用按钮列表替换您的表单并构建 1 个传递颜色的函数。是这样的:

<li class="color-box"><button type="button" class="color-btn" style="background-color:#BDC3C7;" onclick="wFontColour('#BDC3C7')"></button></li>

然后在您的功能中,您可以使用该颜色做任何您需要的事情,在我的情况下,它看起来像这样:

function wFontColour(fontColour) {
    document.execCommand("foreColor", false, fontColour);
};

如果你想保持你的方法,给你的标签一个 id 并试试这个:

$('#myLabel').each('click', function(){
   $(this).closest('input:radio').attr('checked', 'checked');
});
于 2016-03-08T11:30:22.753 回答
0

当您再次单击时,将属性设置为选中将不允许重新选中。它只会工作一次。试试下面的代码

$(document).on('click','li label', function(){
   $(this).closest('li').find('input:radio').trigger('click');
});
于 2020-09-17T04:03:24.843 回答