Блог

Главная - Вопросы по программированию - изменение текста переключателя

изменение текста переключателя

#jquery

#jquery

Вопрос:

У меня есть список переключателей, подобных этому:

 <div id="TheOptions">
  <input type="radio" id="test1" name="mylist"/>option 1
  <input type="radio" id="test2" name="mylist"/>option 2
  <input type="radio" id="test3" name="mylist"/>option 3
  <input type="radio" id="test4" name="mylist"/>option 4
</div>

Когда я пишу

   $('#test1').html('best option');

Текст добавлен к переключателю, и текущий текст «вариант 1» по-прежнему отображается.

Как я могу изменить это, чтобы заставить его работать?

Спасибо.

Ответ №1:

Вы должны обернуть свой текст в <label> элементы:

 <div id="TheOptions">
  <input type="radio" id="test1" name="mylist"/><label for="test1">option 1</label>
  <input type="radio" id="test2" name="mylist"/><label for="test1">option 2</label>
  <input type="radio" id="test3" name="mylist"/><label for="test1">option 3</label>
  <input type="radio" id="test4" name="mylist"/><label for="test1">option 4</label>
</div>

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

 $('label[for=test1]').html('best option');

Комментарии:

1. круто, это оригинально. Как работает инструкция [for =test1]?

2. @frenchie: Это всего лишь стандартный селектор атрибутов .

3. Как бы вы это сделали, если у вас есть <label for="test1"><input type="radio" id="test1" name="mylist"/>option 1</label>

4. @blueDroid В верхней части моей головы я бы вставил <span> туда, чтобы текст было легче выделить: <label for="test1"><input type="radio" id="test1" name="mylist"/><span>option 1</span></label> . Возможно, это лучший способ, но это самое простое, что я могу придумать для jQuery.