3

ASP.NET と C#。

「すべて選択」項目を含む CheckboxList が必要です。

  • この特定の項目が選択されると、他のすべての項目も選択されます。
  • このアイテムから選択が削除されると、他のすべてのアイテムからも削除されます。
  • 他のアイテムのチェック/チェック解除は、「すべて選択」アイテムの選択状態に関係なく、その特定のアイテムにのみ影響します。

これに対するjqueryソリューションを探しています。

私のコードビハインドのデータバインディングコードは次のとおりです。

IList<Central> Centrals = new CentralProvider().GetAllCentralsAsList();
Centrals.Insert(0, new Central(){Central_ID = 999, Central_Name = "Select All"});
CentralChecks.DataSource = Centrals;
CentralChecks.DataTextField = "Central_Name";
CentralChecks.DataValueField = "Central_ID";
CentralChecks.DataBind();

そして、ここにマークアップがあります：

<div class="CentralDiv" id="CentralDiv">
    <h2>Centrals:</h2>
    <span>
        <asp:TextBox ID="CentralTextBox" runat="server" CssClass="textbox">Centrals</asp:TextBox>
        <img id="CentralArrow" src="images/down_arrow.jpg" style="margin-left: -22px; margin-bottom: -5px" />
    </span>
    <div id="CentralEffect" class="ui-widget-content">
        <asp:CheckBoxList ID="CentralChecks" runat="server" onclick="GetSelectedCentralValue();">
        </asp:CheckBoxList>
    </div>
</div>

ページには複数のチェックボックス リストがあることに注意してください。

4

5 に答える 5

12

任意のチェックボックス リストに使用できるようなもので、myCheckBoxList の cssclass を各 CheckBoxList コントロールに追加するだけです。

$('.myCheckBoxList :checkbox').eq(0).click(function() { 
    var toggle = this.checked;
    $('.myCheckBoxList :checkbox').attr("checked", toggle);
});
于 2011-03-22T20:20:33.870 に答える
1

[すべて選択] をクリックすると、すべての ListItems を反復処理できます。そして、すべてのチェックボックスがチェックされているかどうかを維持するために状態フラグを維持します

if(boolAllChecked) {
    foreach (ListItem listItem in CentralChecks.Items)
    {
         listItem .Selected = false;
    }
}
else {
    foreach (ListItem listItem in CentralChecks.Items)
    {
         listItem .Selected = true;
    }
}
于 2011-03-22T20:16:38.783 に答える
0

jqueryを使用してasp CheckBoxListですべての項目を選択する一般的な方法があります。すべて選択機能を使用して、フォーム上に CheckBoxList コントロールをいくつでも持つことができます。あなただけが確認する必要があります

  1. あなたの CheckBoxList にはallowSelectAllクラスがあります
  2. ListItem をチェックボックス リストに追加して、ユーザーが All の値でAllを選択できるようにしました。

chkBoxList.Items.Insert(0, new ListItem("すべて", "すべて"));

次のコードのみが必要です

<script>
    $('.allowSelectAll :checkbox[value=All]').click(function () {
        var toggle = this.checked;
        $(this).closest('.allowSelectAll').find(":checkbox").attr("checked", toggle);
    });
</script>

次のコード スピネットには、4 つのチェックボックス リストがあります。

<div >
<label>Experience 1</label>
<asp:CheckBoxList ID="chklstExp1" runat="server"  CssClass="allowSelectAll">
</asp:CheckBoxList>

<label>Experience 2</label>
<asp:CheckBoxList ID="chklstExp2" runat="server" CssClass="allowSelectAll">
</asp:CheckBoxList>

<label>Experience 3</label>
<asp:CheckBoxList ID="chklstExp3" runat="server" CssClass="allowSelectAll">
</asp:CheckBoxList>

<label>Location</label>
<asp:CheckBoxList ID="chklstLocation" runat="server" CssClass="allowSelectAll">
</asp:CheckBoxList>

<asp:Button runat="server" ID="btnShowReport" OnClick="btnShowReport_Click" Text="Show Report"/>
</div>
于 2014-05-20T00:50:02.283 に答える
0

ここに例があります：http://jsfiddle.net/VTgGA/

コード：

$('input:checkbox').click(function(){
    var $this = $(this);

    if($this.attr('ref') != 'checkall'){
        $(".select-all").attr('checked',false);
    }
    else {
        //Select All
        var $checked = $this.is(':checked');
        $('input:checkbox').each(function(){
            $(this).attr('checked',$checked);
        })
        $(".select-all").attr('checked',$checked);
    }
})

これはチェックボックスのhtmlです：

<input type='checkbox' ref='checkall' class='select-all'/>
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
于 2011-03-22T20:15:59.863 に答える
0

mdmullinaxの素晴らしい答えを拡張して、他のオプションがチェックされていない場合は「すべて選択」(つまり最初)オプションのチェックを外し、他のすべての項目がチェックされている場合は「すべて選択」を再チェックする「すべて選択」動作のこの一般的なソリューションを思いつきました.

また、ASP.Net サーバー側コントロール (ページのヘッド セクションにスクリプトを挿入します) から挿入すると、ウィンドウの読み込み時にも実行されます。申し訳ありませんが、安全であることをお勧めします:)

    $(window).load(function () {
        var cbs = $('.myCheckBoxList :checkbox');
        cbs.eq(0).click(function () {
            var toggle = this.checked;
            cbs.attr('checked', toggle);
        });
        cbs.slice(1).click(function () {
            if (!this.checked) {
                cbs.eq(0).attr('checked', false);
            } else {
                cbs.eq(0).attr('checked', cbs.slice(1).filter(':not(:checked)').length == 0);
            }
        });
    });
于 2012-07-06T13:38:59.813 に答える