0

私はすでにこの質問を投稿しました。申し訳ありませんが、コードを追加できませんでした。そのスレッドは閉じられています。申し訳ありません。皆様にはまたご迷惑をおかけします。

とにかく、ラドグリッドの特定の列のチェックボックスを識別したいだけですか? 私は2つの列を持っています。ボタンを 1 つクリックすると、その特定の列のチェックボックスをオン/オフする必要があります。助けてください。私はすでにこれを試しました。これで、グリッド内のすべてのチェックボックスがオン/オフになります。

以下のコードを見つけてください。

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

チェックボックスが作成された後、チェックボックスを再度見つけるための計画を立てる必要があります。さまざまな方法でこれを行うことができますが、1 つの方法は、列に基づいてチェックボックスに name 属性を割り当て、(tagname の代わりに) 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 に答える