Question

我已经发布了这个问题。我没有添加任何代码。该线程已关闭。道歉。我再次困扰你们。

无论如何，我只想识别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>

我动态创建Checkboxes和Button。

Answer 1

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。

Answer 2

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

您可能还希望使用CSS类来识别您的元素。我个人使用jQuery很多，使用jQuery很容易按类找到一组元素。

$（'。classname'）是使用jQuery选择器查找具有“classname”类的元素的示例;

祝你好运，玩得开心。

Answer 3

认为使用JQuery可以更轻松地完成这些操作。

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

举个例子：

http://jsfiddle.net/gnRQj/

如何使用javascript识别网格中特定列的复选框

3 个答案: