0

我已经发布了这个问题。抱歉，我未能添加任何代码。该线程已关闭。道歉。我又来打扰大家了。

无论如何，我只想识别 radgrid 中特定列的复选框？我有两列。和两个按钮。如果我单击一个按钮，我需要单独选中/取消选中该特定列的复选框。请帮忙？我已经试过了。现在网格中的所有复选框都被选中/取消选中。

请在下面找到代码。

var inputs = document.getElementsByTagName("input"); //or document.forms[0].elements;

   for (var i = 0; i < input.length; i++) 
   {
       if (input[i].type == "checkbox") 
       {
           if (input[i].checked) {
               input[i].checked = false;
           }
           else 
           {
               input[i].checked = true;
           }
       }
   }

请告诉我如何单独选择特定列的复选框？

HTML 代码：

    <html xmlns="http://www.w3.org/1999/xhtml">


<head id="Head1" runat="server">
   <script language="javascript" type="text/javascript">


       function clickbutton()
        {
           debugger;

           var inputs = document.getElementsByTagName("input"); //or document.forms[0].elements;

           for (var i = 0; i < input.length; i++) 
           {
               if (input[i].type == "checkbox") 
               {
                   if (input[i].checked) {
                       input[i].checked = false;
                   }
                   else 
                   {
                       input[i].checked = true;
                   }
               }
           }   



       }


</script>
</head>
<body class="BODY">
    <form id="mainForm" method="post" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <!-- content start -->
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="clrFilters">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="clrFilters" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadGrid ID="RadGrid1" AutoGenerateColumns="False" 
            AllowSorting="True" ClientSettings-Scrolling-AllowScroll="true"
            AllowFilteringByColumn="True" Width="1251px" runat="server" OnColumnCreating="RadGrid1_ColumnCreating"  
            OnItemCommand="RadGrid1_ItemCommand" 
            OnNeedDataSource="RadGrid1_NeedDataSource" Skin="Gray"
             OnItemDataBound="RadGrid1_ItemDataBound"  OnItemCreated="RadGrid1_ItemCreated"
           >
            <FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
            <AlternatingItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
            <PagerStyle Mode="NumericPages" />
            <MasterTableView>


<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
            </MasterTableView>


            <SelectedItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />


<ClientSettings>
    <Selecting AllowRowSelect="True" />
<Scrolling AllowScroll="True"></Scrolling>
</ClientSettings>

<FilterMenu EnableTheming="True">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</FilterMenu>

            <EditItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
            <ActiveItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />
            <FilterItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />

        </telerik:RadGrid>


        <br />



        &nbsp;&nbsp;&nbsp;
        <p>



        </p>

    </form>
</body>
</html>

我正在动态创建复选框和按钮。

4

3 回答 3

0 
document.forms[ 0 ].addEventListener( 'click', function( e ) {
    if ( e.target.nodeName === 'input' ) {
        // This gets the index of the parent (supposedly the TD)
        // inside the parent of the parent (supposedly the TR).
        var i = [].indexOf.call( e.target.parentNode.parentNode,
            e.target.parentNode );

        // So uncheck all the checkboxes of this column.
        // Sending to another function is better or the code
        // becomes cluttered.
        uncheckColumn( i );
    }
};

function uncheckColumn( index ) {
    // For each TD
    [].forEach.call( document.getElementById( 'tr-id' ).children[ index ],
        function( column ) {
        column.firstElementChild.checked = column.firstElementChild.checked
            ? false : true;
    } );
}

然而，这需要现代浏览器。对于旧版浏览器的支持，请查看 jQuery。

于 2012-06-08T14:53:24.720 回答
0

您需要为自己制定一个计划，以便在创建复选框后再次查找它们。您可以通过多种方式执行此操作，但一种方法是根据它们所在的列为复选框分配名称属性并使用 document.getElementsByName()（而不是标记名）。

您可能还想研究使用 CSS 类来识别您的元素。我个人经常使用 jQuery，使用 jQuery 很容易按类找到一组元素。

$('.classname') 是使用 jQuery 选择器查找具有类 'classname' 的元素的示例；

祝好运并玩得开心点。

于 2012-06-08T14:54:07.833 回答
0

认为这些使用 JQuery 更容易完成。

但是……如果input标签真的相互交替，那么您可以使用模运算来伪选择它们。

做了一个例子：

http://jsfiddle.net/gnRQj/

于 2012-06-08T14:54:19.167 回答