点击标签上不检查单选按钮

我试图通过设置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; 
    }

来源

2013-07-17 aardnoot

为什么'position：absolute;'为'label'？我相信这是什么原因造成的问题... – 2013-07-17 12:05:14

个人一切工作：http://jsfiddle.net/E3NPc/ –

你试过了：[[] = {radio =“radio”] {opacity：0}'？ – otinanai

对我来说，单选按钮的工作。在点击标签时

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

来源

2013-07-17 12:53:10 Daniel

为真的老问题的新答案.. :)不知道这是你的情况，但我experimentind完全相同的问题：您可以在CSS显示设置：无输入复选框有2个重复表单的页面，其中2个始终隐藏。一个用于移动设备的页面区域，另一个用于桌面设备。

首先出现在html流中的一个工作正常，另一个没有。假例如，看到JS提琴：

<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-08 11:06:52 Stratboy

对于同样的事情（一个colorpicker）我用另一种方法，我认为它更简单。只需用一个按钮列表替换您的表单，并在您传递颜色的地方构建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-08 11:30:22 Spluf

点击标签上不检查单选按钮

回答

相关问题