Как сделать так, чтобы флажок также не нажимался на текстовую метку?

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

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

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

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

• IE6
• IE7
• Fire Fox

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

<label style = "display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type = "checkbox" name = "surname">
</label>

Ронни,

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

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

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

<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, который эффективно переключается дважды.

Установите свойство 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>

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

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

Очень неприятно столкнуться с формой, которая читает «Выберите способ доставки: переключатель 1, переключатель 2, переключатель 3».

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

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

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

если нет, пожалуйста, помогите мне!

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

 <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