Как сделать выделенную кнопку HTML-радио выделенной?

Question

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

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

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

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

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

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

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

ОБНОВЛЕНИЕ : Как бы вы реализовали решение "nickf" без использования jQuery?

Answer 1

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

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

Тогда просто используйте селектор брата:

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

Answer 2

Вы можете попробовать сделать все с помощью 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;
}

Объяснение: Это ловит все промежутки после радиовхода (type = "radio") и проверяется.

¹ Я тестировал Firefox 3 и IE7, и он работал только с Firefox. ( справочник по совместимости )

Answer 3

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

<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 4

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

Answer 5

Вот пример:

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

РЕДАКТИРОВАТЬ: Вы должны определить ваши текстовые промежутки с такими идентификаторами: span_

Answer 6

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

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

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

Answer 7

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

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

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

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

.felkover
{
    font-weight: bold;
}

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