Как сделать кнопку HTML Radio полужирным для выбора?

Question

В HTML, у меня есть следующие радио выбора кнопки

уплотнительного Выбор 1
уплотнительного Выбор 2
уплотнительного Выбор 3

То, что я хотел бы сделать, это когда кто-то выбирает переключатель сверху, что текст, соответствующий выбранному переключателю, становится полужирным.

Так, например, - если человек выбирает "Вариант 2", то кнопка выбор радио теперь будет выглядеть следующим образом:

о Выборе 1
о Выборе 2
о Выборе 3

Как это сделать? Я предполагаю, что нужно использовать JavaScript или CSS.

Заранее спасибо

UPDATE: Как бы реализовать решение "nickf" без использования JQuery?

Answer 1

Используйте событие OnChange вашего select, чтобы изменить стиль css выбранного элемента на жирный.

Answer 2

<input type=button onClick="this.style.fontWeight=bold"> 

Это может сработать, я не испытал сам. Конечно, есть намного лучшие решения.

Если у вас есть JavaScript-фреймворк (например, jQuery), вставленный в ваш код, у него, вероятно, есть много функций, доступных для этого. Селекторы, стилисты, css-обработчики и многие другие.

Я предпочел бы предложить создать класс CSS, как это:

.felkover 
{ 
    font-weight: bold; 
} 

Затем просто добавить или удалить это определение в атрибуте класса любой данной кнопки.

Answer 3

Вы можете попробовать сделать все с помощью CSS.

Я попробовал это, и это работает :

<input type="radio" name="choice" value="1" checked /><span>First choice</span> 
<input type="radio" name="choice" value="2" /><span>Second choice</span> 

input[type="radio"]:checked + span 
{ 
    font-weight: bold; 
} 

Объяснение: Это перехватывает все пролеты после ввода радио (тип = «Радио») и проверяется.

Я тестировал с Firefox 3 и IE7 и работал только с Firefox. (compatibility reference)

Answer 4

Я хотел бы сделать что-то вроде этого:

<label><input type="radio" name="myRadio" value="1" /> One</label> 
<label><input type="radio" name="myRadio" value="2" /> Two</label> 
<label><input type="radio" name="myRadio" value="3" /> Three</label> 

с onchange обработчиком на каждый элемент, чтобы изменить класс CSS родительской наклейки.В JQuery это будет выглядеть следующим образом:

$(':radio').change(function() {   // get all the radio buttons and 
              // add an onchange handler 
    var $label = $(this).parent('label'); // get a reference to the parent label 
    if (this.checked) {     // if the radio is on... 
     $label.addClass('selected');  // add the CSS class "selected" to the label 
    } else {        // otherwise... 
     $label.removeClass('selected'); // take the class away. 
    } 
}); 

Просто помните, чтобы переопределить стиль по умолчанию для меток (который выделен жирным шрифтом):

label { 
    font-weight: normal; 
} 
label.selected { 
    font-weight: bold; 
} 

Answer 5

развлекаться ваши кнопки имеют метки вокруг них, чтобы включить в текст, я добавит это в метки.

<label onchange="this.parent.children.fontWeight='normal';this.fontWeight='bold';"> 

Хотя в идеале я бы не поставил этот встроенный код, но подключить его к ним где-то в голове после загрузки страницы.

Answer 6

Вы можете сделать это чисто с помощью CSS, но вам нужно обернуть текст каждого входа в пролете или другой тег:

<input type="radio" name="group1" value="Milk"><span>Milk</span><br> 

Тогда просто использовать селектор родственный:

input[type="radio"]:checked+span { font-weight: bold; } 

Answer 7

Вот пример:

<script> 
    function makeBold() 
    { 
    var radios = document.getElementsByName("sex"); 
    for (var index = 0; index < radios.length; index++) 
    { 
     if (radios[index].checked) 
     { 
     document.getElementById("span_" + radios[index].value).style.fontWeight='bold'; 
     } 
     else 
     { 
     document.getElementById("span_" + radios[index].value).style.fontWeight='normal'; 
     } 
    } 
    } 
</script> 

<input type="radio" name="sex" value="male" onclick="makeBold();"> 
<span id="span_male">Male</span> 

<br> 
<input type="radio" name="sex" value="female" onclick="makeBold()"> 
<span id="span_female">Female</span> 

EDIT: Вы должны определить свой т ext spans с такими идентификаторами: span_