如何使用 Javascript 设置 ASP 复选框状态？

Question

在一个 VB.net 应用程序中，我有几个使用常规 ASP 控件创建的复选框，即<asp:CheckBox ID="cb3" runat="server" Checked="true" />

我正在尝试实现“全选/全选”功能，但遇到了一些问题。 Javascript 不会更改 Internet Explorer (v9) 中复选框的状态。我尝试使用 IE 的开发工具进行调试，并且复选框肯定将其checked 属性设置为true。 （也尝试设置为“已检查”。）这是 JS：

function setCheckboxes( state )
{
    var inputs = document.getElementsByTagName("input");
    for ( var i in inputs )
    {
        if ( inputs[i].type == "checkbox" )
        {
            // this line is definitely executed on the checkboxes
            inputs[i].checked = state;
            // this doesn't work either
            //inputs[i].checked = (state ? "checked" : "");
        }
    }
}

document.getElementById("cbSelectAll").onclick = function() {
    setCheckboxes(true);
    return false;
}

document.getElementById("cbSelectNone").onclick = function() {
    setCheckboxes(false);
    return false;
}

Firefox (v11) 中出现了第二个可能相关的问题。上面的 JS 工作正常并取消选中复选框，但是在提交时它们被设置为初始状态。通过单击进行选择和取消选择可以正常工作。我该如何解决这个问题？

编辑：明确地说，这是.net 的具体问题，而不仅仅是基本的 HTML。我尝试了一个带有复选框的基本页面，IE（取消）选择它们就好了。

更新 2：包括更多信息，因为它可能是相关的。我刚刚检查了几件事，单击复选框似乎并没有在 Internet Explorer 中更改它们的状态，但是在提交时它们的状态已被存储。

我正在使用 Telerik Grid 视图并将数据绑定到它。这是aspx代码：

    <telerik:RadGrid ID="gridContacts" runat="server" Skin="Office2007" GridLines="None" AutoGenerateColumns="False">
        <MasterTableView>
            <RowIndicatorColumn>
                <HeaderStyle Width="20px" />
            </RowIndicatorColumn>
            <ExpandCollapseColumn>
                <HeaderStyle Width="20px" />
            </ExpandCollapseColumn>
            <Columns>
                <telerik:GridBoundColumn DataField="id" DataType="System.String" UniqueName="id" Visible="False">
                    </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="name" DataType="System.String" UniqueName="name" HeaderText="Name">
                    </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="email" DataType="System.String" UniqueName="email" Visible="False">
                    </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="sms" DataType="System.String" UniqueName="sms" Visible="False">
                    </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn DataField="useemail" DataType="System.Boolean" UniqueName="useemail" HeaderText="Email"> 
                    <ItemTemplate> 
                        <asp:CheckBox ID="cbEmail" runat="server" Checked='<%# Eval("useemail") %>' /> 
                    </ItemTemplate> 
                </telerik:GridTemplateColumn> 
                <telerik:GridTemplateColumn DataField="usesms" DataType="System.Boolean" UniqueName="usesms" HeaderText="SMS"> 
                    <ItemTemplate> 
                        <asp:CheckBox ID="cbSMS" runat="server" Checked='<%# Eval("usesms") %>' /> 
                    </ItemTemplate> 
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <FilterMenu EnableTheming="True" Skin="Office2007">
            <CollapseAnimation Duration="200" Type="OutQuint" />
        </FilterMenu>
    </telerik:RadGrid>

对于每个复选框，输出的 HTML 是这样的：

<input name="ctl00$ContentPlaceHolder1$gridContacts$ctl00$ctl04$cbEmail"
class="Office2007 input" id="ctl00_ContentPlaceHolder1_gridContacts_ctl00_ctl04_cbEmail"
type="checkbox" CHECKED="checked" /><label class="Office2007 radfdCheckboxChecked"
for="ctl00_ContentPlaceHolder1_gridContacts_ctl00_ctl04_cbEmail" unselectable="on">&nbsp;</label>

Answer 1

尝试查看这个问题/答案：

How to implement "select all" check box in HTML?

他们实现的 for 循环的语法略有不同，您可能想尝试一下。还有一些很好的例子，我会推荐如何使用 jQuery 来做到这一点。

Answer 2

不满意，

我认为这可能会有所帮助：在您的 setCheckboxes 函数中。不知道为什么，但复选框的行为似乎有所不同......好吧，其他一切。

function setCheckboxes( state )
{
    var inputs = document.getElementsByTagName("input");
    for ( var i in inputs )
    {
        if ( inputs[i].type == "checkbox" )
        {
            if (state == "true"){
                inputs[i].disabled=false;
                inputs[i].parentElement.disabled = false;
            } else {
                inputs[i].disabled=true;
                inputs[i].parentElement.disabled = true;
            }               
        }
    }
}

希望有帮助！

-sf

Answer 3

checked 属性的值应该是“checked”而不是 true/false。 Firefox 可以处理真/假值，但 IE 似乎不喜欢它。

查看文档：http://www.w3schools.com/tags/att_input_checked.asp