Question

我在＆lt; label＆gt;内有一个复选框我想要那个复选框，当选中或取消选中时，触发一个功能。我将一个onchange触发器附加到复选框，但是在IE6中，触发器仅在焦点转离复选框后才会触发，而在FF3和Chrome中它会立即触发。我删除了onchange触发器并将onclick触发器附加到＆lt; label＆gt;但是现在当标签被点击一次时触发器会触发两次（enyone知道原因吗？）......

我的问题是：如果通过点击它或标签上的方式选中或取消选中复选框，我怎样才能触发该功能。

感谢。

Answer 1

假设您不想要花哨的ASP / JQuery解决方案，只需将该函数附加到复选框本身的onClick就可以了。

（当然，如果你想让函数的行为不同，你需要检查函数中复选框的当前状态，具体取决于复选框是否被选中。）

Answer 2

正如“Electrons_Ahoy”所说，你应该能够简单地将onclick处理程序附加到checkbox元素。当用户点击标签而不是复选框时，也应该调用此处理程序。

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中是如何工作的。）

史蒂夫

Answer 3

不确定使用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方法（在我看来）稍微好一些，而且它也更安全一些。

Answer 4

感谢您的所有回复。

@Electrons_Ahoy和@Steve：你很紧张。我的问题是我把复选框放在了labe中，所以我做了以下事情：我拿了标签外面的复选框，只在复选框上放了onclick触发器，它工作正常。

我还想清楚为什么当复选框位于标签内并且onclick触发器位于标签上时，trgger会触发两次：这是因为当我点击标签时，复选框上的点击被模拟，复选框位于标签内，点击在标签上模拟，duuuuuhhh：）

Answer 5

您可能需要打开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"/>

如何使复选框触发功能？

5 个答案: