Как вы также можете изменить текст кнопки?

У меня есть этот переключатель (и некоторые другие после этого):

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

Но если я хочу активировать радиокнопку, я должен щелкнуть ее, щелкнув слово "Молоко", которое находится справа от кнопки, не активирует его. Как я могу это сделать?, Все примеры, которые я нашел о переключателях до сих пор, имеют ту же проблему. Спасибо заранее.

Ответ 1

Здесь вы хотите использовать тег метки.

Что-то вроде:

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

Ярлыки сообщают обозревателю, что все, что содержится внутри, должно рассматриваться как один элемент (с точки зрения текста, а не div).

Взгляните на это для примера: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_label

Ответ 2

Если вы используете тег метки, указав свой переключатель на ID, вы должны нажать на метку, чтобы выбрать радио.

<input type="radio" name="group1" value="Milk" id="rad1">
<label for="rad1">Milk</label>

http://jsfiddle.net/tvFgU/1/

Это справедливо для xhtml 1.0 strict:

Ответ 3

Для React JSX

<input type="radio" name="group" value="happy" id="rad1">
<label htmlFor="rad1">YES</label>

<input type="radio" name="group" value="sad" id="rad2">
<label htmlFor="rad2">NO</label>

Здесь атрибут Name будет одинаковым для обоих переключателей.