Fatal编程技术网
  • javascript/
  • 如何使用javascript识别网格中特定列的复选框

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

javascript

如何使用javascript识别网格中特定列的复选框,javascript,Javascript,我已经发布了这个问题。很抱歉，我未能添加任何代码。该线程已关闭。道歉。我又打扰你们了 不管怎样，我只想识别radgrid中特定列的复选框？我有两个专栏。和两个按钮。如果我单击一个按钮，我需要单独选中/取消选中该列的复选框。请提供帮助？我已经尝试过了。现在，网格中的所有复选框都处于选中/取消选中状态 请在下面查找代码 var inputs = document.getElementsByTagName("input"); //or document.forms[0].elements; f

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

不管怎样，我只想识别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>
我正在动态创建复选框和按钮

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。

您需要为自己设置一个计划，以便在创建复选框后再次查找它们。您可以通过多种方法来实现这一点，但其中一种方法是根据复选框所在的列为其指定名称属性，并使用document.getElementsByName而不是tagname

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

$'.classname'是使用jQuery选择器查找类为'classname'的元素的示例

祝你好运，玩得开心。

想象一下，使用JQuery可以更轻松地完成这些任务

但无论如何。。。如果输入标记确实彼此交替，则可以使用模运算伪选择它们

他举例说：

您可以向我们展示您的网格/HTML吗？行/列的元素名称是唯一的吗？可能能够检查输入字段的名称或类，以确定它是否是您想要的列。我们需要查看HTML以帮助您。您应该使用jQuery或Prototype来执行此类任务。使用jQuery，您可以在一行代码中完成这项工作。我还建议您为每列上的单元格使用不同的css类名，以便更容易为particupar列选择所有复选框。