Флажок отмечен при нажатии на ассоциированную метку

Question

У меня есть checkbox и описание флажка в label. Я хочу check Флажок при нажатии на ярлык.

Markup:

<input id="Checkbox1" type="checkbox" /></div>
<label id="lblAssociateWithCheckBox" title="Check"></label>

В jQuery я пытаюсь:

$(document).ready(function() {
            CheckCheckBox($('lblAssociateWithCheckBox'), $('Checkbox1'));
            function CheckCheckBox(lblID, chkID) {
                $('#' + lblID).live("click", function() {
                    return $('#' + Checkbox1).attr('checked', 'checked');
                });
            }
        });

Но это не работает. Я получил ошибку в Firebug.

необработанное исключение: синтаксическая ошибка, нераспознанное выражение: # [объект Object]

В чем моя ошибка? Если это неправильный способ, предложите альтернативный способ.

Answer 1

Вам не нужно писать код jQuery.Вы можете сделать это с помощью HTML.

Измените содержимое HTML, как показано ниже:

<input id="Checkbox1" type="checkbox" />
<label for="Checkbox1"    title="Check">Check ME</label>

Вот JSFiddle: http://jsfiddle.net/sjG4w/

Answer 2

Обновление: Только что увидел ваш комментарий под ответом Павана о желании использовать элементы без меток в качестве меток, например, элементы span.Мой первый ответ почему ?Но если вы действительно хотите этого, вы можете сделать это легко, без необходимости писать много кода и жестко закодировать множество идентификаторов элементов в вашем JavaScript (который, кажется, является тем путем, которым вы в настоящее время пользуетесь существующим кодом).

Используйте атрибут data в элементе, который вы хотите использовать в качестве псевдо-метки, следующим образом:

<span data-labelfor="name">Name</span>
<input type="checkbox" id="name">

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

$(document).ready(function() {

     $("[data-labelfor]").click(function() {
         $('#' + $(this).attr("data-labelfor")).prop('checked',
                          function(i, oldVal) { return !oldVal; });
     });

});

Рабочая демонстрация, показывающая, что одна короткая функция применяет поведение к диапазону метки и div: http://jsfiddle.net/TFD72/

Исходный ответ:

Как уже объяснил Паван, вы можете сделать это автоматически с помощью атрибута for в ярлыке, но с точки зрения причины, по которой ваш код не работает:

Ваш звонок на CheckCheckBox() функция передает два объекта jQuery в качестве параметров следующим образом:

CheckCheckBox($('lblAssociateWithCheckBox'), $('Checkbox1'));

Но функция обрабатывает эти параметры, как если бы они были строками, содержащими идентификаторы элементов, которые вы хотите использоватьналог.Поэтому, если вы хотите сохранить свою функцию как есть, просто измените способ ее вызова, чтобы передать правильный тип параметра:

CheckCheckBox('lblAssociateWithCheckBox', 'Checkbox1');

Это должно исправить ошибку, которую вы цитируете.

Однако,Ваша функция как есть будет устанавливать флажок «проверено» при каждом нажатии на ярлык, даже если он уже был отмечен.Если вы хотите, чтобы он переключался между проверенным и непроверенным (т.е. нормальным поведением), вы можете сделать что-то вроде этого:

 $('#' + Checkbox1).prop('checked', function(i, oldVal) { return !oldVal; });

(Но, опять же, просто сделайте это в разметке html, используя атрибут for.)

Answer 3

Если вы всегда используете label и checkbox, то пользовательский атрибут for для label и id флажка одинаков. Например,

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

ИЛИ

CheckCheckBox($('#lblAssociateWithCheckBox'), $(#'Checkbox1'));
function CheckCheckBox(lblID, chkID) {
    lblID.live("click", function() {
        return $(this).closest(chkID).attr('checked', true);
    });
}

Answer 4

Вы можете сделать это с помощью

<label id="lblAssociateWithCheckBox" title="Check" OnClick="JavaScript:ClickedLabel('Check1')" ></label>

В ClickedLabel вы можете найти переданный элемент, и если он отмечен, снимите флажок и, если не отмечен, отметьте его.

Answer 5

Есть два способа сделать это вообще без JavaScript.Паван объяснил первый способ, который заключается в использовании атрибута for (соответствует идентификатору флажка):

<input id="Checkbox1" type="checkbox" />
<label for="Checkbox1" title="Check">Check ME</label> 

Другой способ, который я предпочитаю, это заключить флажок в тег метки:

<label><input type="checkbox" id="Checkbox1"> Text</label>

Вот JSFiddle для обоих: http://jsfiddle.net/m4rK5/