При нажатии на этикетке не проверяет радиокнопку

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

Answer 1

Радиокнопка работа для меня. Вы можете установить на дисплее CSS: ни для ввода флажком:

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

Answer 2

Новый ответ на самом деле старый вопрос .. :) Не уверен, что это ваш случай, но я experimentind точно такой же вопрос, при нажатии на ярлыки где есть две дублированные формы, одна из которых всегда скрыта. Один используется в области страниц для мобильных устройств, другой для настольных устройств.

Один из первых в потоке 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/

Так что сейчас для меня, Хитрость здесь заключается, чтобы найти способ, чтобы избежать дублирования форм.

Answer 3

Для того же (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'); 
});