Как заставить флажок запускать функцию?

У меня есть флажок внутри ‹label›, и я хочу, чтобы этот флажок, когда он был отмечен или не отмечен, запускал функцию. Я прикрепил триггер onchange к флажку, но в IE6 триггер срабатывает только после того, как фокус переводится с флажка, а в FF3 и Chrome он срабатывает сразу. Я удалил триггер onchange и прикрепил триггер onclick к ‹label›, но теперь триггер срабатывает дважды, когда метка нажимается один раз (кто-нибудь знает, почему?)...

Мой вопрос: как я могу заставить флажок запускать функцию, когда он установлен или снят, щелкнув по нему или по его метке.

Спасибо.


javascript checkbox html label
person Angoras Rids    schedule 03.04.2009    source источник

Ответы (5)


arrow_upward
6
arrow_downward

Предполагая, что вам не нужно причудливое решение ASP/JQuery, простое присоединение функции к onClick самого флажка должно работать нормально.

(Конечно, вам нужно проверить текущее состояние флажка в функции, если вы хотите, чтобы функция вел себя по-разному в зависимости от того, установлен флажок или нет.)

person Electrons_Ahoy    schedule 03.04.2009

arrow_upward
3
arrow_downward

Как говорит "Electrons_Ahoy", вы должны иметь возможность просто прикрепить обработчик onclick к элементу флажка. Этот обработчик также должен вызываться, когда пользователь нажимает на метку вместо флажка.

HTML:

<label><input type="checkbox" id="myCheckbox" />My Checkbox</label>

JavaScript:

document.getElementById("myCheckbox").onclick = function() {
    if (this.checked) {
        alert("Checkbox was checked.");
    }
    else {
        alert("Checkbox wasn't checked.");
    }
};

Приведенный выше код работает правильно в Safari 4 и Firefox 3 (я не уверен, как он будет работать в IE).

Стив

person Steve Harrison    schedule 04.04.2009

arrow_upward
1
arrow_downward

не уверен, подходит ли вам использование Prototype, но если это так, вы должны сделать это следующим образом (предполагается, что Prototype 1.6 , Код, написанный для более ранних версий, будет немного отличаться):

HTML:

<label><input type="checkbox" id="myCheckbox" />My Checkbox</label>

JS:

$('myCheckbox').observe('click', function(cbox)
    {
        var cbox = $('myCheckbox');
        //do work in here.
        //cbox is the DOM element that represents your checkbox
    }
);

Делать это таким образом немного приятнее, чем «голый» подход JS (на мой взгляд), и это также немного безопаснее.

person Aaron    schedule 04.04.2009

arrow_upward
1
arrow_downward

Спасибо за все ваши ответы.

@Electrons_Ahoy и @Steve: Вы напряжены. Моя проблема заключалась в том, что я устанавливал флажок внутри ярлыка, поэтому я сделал следующее: я взял флажок за пределами ярлыка, поместил триггер onclick только на флажок, и он отлично работает.

Я также понял, почему trgger срабатывал дважды, когда флажок находился внутри метки, а триггер onclick был на метке: это было потому, что, когда я щелкал метку, симулировался щелчок по флажку, а флажок, находящийся внутри метки, щелчок был сымитировано на этикетке, дуууууххх :)

person Angoras Rids    schedule 04.04.2009

arrow_upward
-1
arrow_downward

Вероятно, вам нужно включить свойство autopostback:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox.autopostback.aspx

           <asp:CheckBox id="checkbox1" runat="server"
                AutoPostBack="True"
                Text="Include 8.6% sales tax"
                TextAlign="Right"
                OnCheckedChanged="Check_Clicked"/>
person John Farrell    schedule 03.04.2009