2

我在 <label> 中有一个复选框，我希望该复选框在选中或未选中时触发一个功能。我在复选框上附加了一个 onchange 触发器，但在 IE6 中，触发器仅在焦点离开复选框后触发，而在 FF3 和 Chrome 中，它会立即触发。我删除了 onchange 触发器并将 onclick 触发器附加到 <label> 但是现在当标签被单击一次时触发器会触发两次（有人知道为什么吗？）...

我的问题是：当通过单击它或它的标签选中或取消选中复选框时，如何使复选框触发一个功能。

谢谢。

4

5 回答 5

6

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

（当然，如果您想让函数根据复选框是否被选中而表现不同，则需要检查函数中复选框的当前状态。）

于 2009-04-03T18:53:28.527 回答
3

正如“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 中如何工作）。

史蒂夫

于 2009-04-04T01:03:13.770 回答
1

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

于 2009-04-04T01:19:56.647 回答
1

感谢您的所有回复。

@Electrons_Ahoy 和@Steve：你很紧张。我的问题是我将复选框放在标签内，所以我做了以下操作：我将复选框放在标签外，仅将 onclick 触发器放在复选框上，它工作正常。

我还弄清楚了为什么当复选框在标签内并且 onclick 触发器在标签上时触发两次：这是因为当我单击标签时，模拟了对复选框的单击并且复选框在标签内单击是在标签上模拟，duuuuuhhh :)

于 2009-04-04T11:41:06.670 回答
-1

您可能需要打开 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"/>
于 2009-04-03T18:40:42.083 回答