Question

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

我正在尝试实现“Select all / none”功能，但我遇到了一些问题。 Javascript不会更改Internet Explorer（v9）中复选框的状态。我尝试使用IE的开发工具进行调试，复选框肯定会将checked属性设置为true。（也试过设置为“checked”。）这是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（de）选择它们就好了。

更新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似乎不喜欢它。

查看文档：{{3}}

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

3 个答案: