Как сделать флажок пуговицу от нажатия на текстовую метку, а?

голоса
29

Checkboxesв HTMLформах не имеют неявные этикетки с ними. Добавление явного метки (некоторые тексты) рядом с ним не переключается checkbox.

Как сделать флажок пуговицу от нажатия на текстовую метку, а?

Задан 05/08/2008 в 12:51
источник пользователем
На других языках...                            


8 ответов

голоса
43

Если вы правильно разметить свой HTML код, нет никакой необходимости в JavaScript. Следующий код позволит пользователю нажать на текст этикетки пометить флажок.

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

Для атрибута на этикетку элемент ссылку на ид атрибут элемента ввода и браузер делает все остальное.

Это было тестирование для работы в:

  • IE6
  • IE7
  • Fire Fox
Ответил 05/08/2008 в 13:00
источник пользователем

голоса
17

Установите CSS displayсвойство для ярлыка быть блок - элемент и использовать его вместо вашего DIV - это сохраняет смысловое значение наклейки, позволяя любой стиль вам нравится.

Например:

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}
<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

Ответил 05/08/2008 в 13:52
источник пользователем

голоса
3

Как указано @Gatekiller и другим, правильным решением является <метка> тег.

Click-в-текст хороший, но есть еще одна причина, чтобы использовать <метка> тег: доступность. Инструментам, которые слабовидящие люди используют для доступа в сети нужно <метка> S для считывания значения флажков и переключателей. Без <метка> с, они должны угадать, на основе окружающего текста, и они часто получают это неправильно или придется отказаться.

Это очень неприятно столкнуться с формой , которая читает «Пожалуйста , выберите способ доставки, радио-button1, радио-button2, радио-button3».

Обратите внимание, что веб-доступность является сложной задачей; <метка> s являются необходимым шагом, но они не достаточно, чтобы гарантировать доступность или соответствие с государственными нормами, где она применяется.

Ответил 25/08/2008 в 16:21
источник пользователем

голоса
2

Ронни,

Если вы хотите, чтобы заключить текст этикетки и флажок внутри элемента обертки, вы можете сделать следующее:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
Ответил 05/08/2008 в 13:28
источник пользователем

голоса
1

Вы можете обернуть флажок в метке:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
Ответил 05/08/2008 в 13:25
источник пользователем

голоса
0

Вам нужно просто обернуть флажок в маркирующие так же, как это

 <label style="height: 10px; width: 150px; display: block; ">
  [Checkbox Label Here] <input type="checkbox"/>
 </label>

FIDDLE

или вы можете также использовать для атрибута метки и идентификатора вашего флажка , как показано ниже

<label for="other">Other Details</label>
<input type="checkbox" id="other" />

FIDDLE

Ответил 01/09/2015 в 12:10
источник пользователем

голоса
-1

это должно работать:

<script>
function checkbox () {
    var check = document.getElementById("myCheck").checked;
    var box = document.getElementById("myCheck")

    if (check == true) {
        box.checked = false;
    }
    else if (check == false) {
        box.checked = true;
    }
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>

если он не делает, Pleae Corect меня!

Ответил 09/03/2015 в 12:13
источник пользователем

голоса
-2

Обертывание с меткой еще не позволяет нажав кнопку «где-нибудь в поле» - до сих пор только по тексту! Это делает работу для меня:

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

но, к сожалению, имеет много JavaScript, который эффективно переключая дважды.

Ответил 05/08/2008 в 13:34
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more