单击标签不会选中单选按钮

Question

我正在尝试通过设置以下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;
}

- user2568495

---

为什么 label 要使用 position: absolute;？我相信这就是问题的原因... - user1386320

个人觉得一切都正常：http://jsfiddle.net/E3NPc/ - Jeff Noel

你试过这个吗：[type="radio"]{opacity:0}？ - otinanai

@zlomerovic，那似乎不是问题所在。 - user2568495

@FrankKluyt，你的代码对我们来说很好用，否则请简要解释一下。 - Praveen

Answer 1

这是一篇关于IT技术的翻译内容。新回答针对一个非常老的问题... :) 不确定这是否适用于您的情况，但当在页面上单击标签时，我遇到了完全相同的问题，其中有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/

对于我来说，现在的关键是找到一种避免表单重复的方法。

- Luca Reghellin

Answer 2

对于同样的事情（一个颜色选择器），我采用了另一种方法，我认为它更简单。只需用按钮列表替换您的表单，并构建一个函数，在其中传递颜色即可。就像这样：

<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');
});

- Spluf

Answer 3

单选按钮对我有效。 您可以在CSS中设置display:none以隐藏输入复选框：

.kleurenkiezer input[type=radio] {
  display:none
}

- Daniel

Answer 4

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

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

命名空间生成了唯一的ID，之后我的单选按钮就可以正常工作了。

- gkee

Answer 5

设置属性为checked后，再次点击将无法重新选中。它只会起作用一次。尝试以下代码：

$(document).on('click','li label', function(){
   $(this).closest('li').find('input:radio').trigger('click');
});

- romal tandel