1

asp.netページでチェックボックスリストを使用し、データベースからデータをバインドしています。今、私は単一のアイテムを選択したいと思います。アイテムを選択すると、古い選択がクリアされ、新しいアイテムのみが選択されるとします

これを行うのを手伝ってください..

4

6 に答える 6

6

これを試して

フロントエンド

function radioMe(e) {
  if (!e) e = window.event;
  var sender = e.target || e.srcElement;

  if (sender.nodeName != 'INPUT') return;
  var checker = sender;
  var chkBox = document.getElementById('<%= chks.ClientID %>');
  var chks = chkBox.getElementsByTagName('INPUT');
  for (i = 0; i < chks.length; i++) {
      if (chks[i] != checker)
      chks[i].checked = false;
  }
}

<asp:CheckBoxList runat="server" ID="chks">
  <asp:ListItem>Item</asp:ListItem>
  <asp:ListItem>Item</asp:ListItem>
  <asp:ListItem>Item</asp:ListItem>
  <asp:ListItem>Item</asp:ListItem>
</asp:CheckBoxList>

バックエンド

protected void Page_Load(object sender, EventArgs e)
{
        chks.Attributes.Add("onclick", "radioMe(event);");
}

しかし、これをすべて行う代わりに、RadioButtonListコントロールを検討する必要があります

于 2012-07-27T12:26:44.710 に答える
5

RadioButtonList に対して CheckBoxList を使用すると、回避策を考案しなくてもユーザーが選択を解除できるため、便利な場合があります。ヨギの答えに続いて、CheckBoxListのClientIDを使用するたびに関数にプラグインすることなく、簡単に再利用できるアプローチが必要でした。よぎさん、テンプレートありがとうございます。

  • 使用法：

    <asp:CheckBoxList ID="m_testControl" runat="server" data-toggle="radio" RepeatDirection="Horizontal">
    <asp:ListItem Value="CON">Concur</asp:ListItem>
    <asp:ListItem Value="CWI">Concur With Intent</asp:ListItem>
    <asp:ListItem Value="DNC">Do Not Concur</asp:ListItem>
</asp:CheckBoxList>

  • JQuery 関数:

    $(document).ready(function ()
{
    // turn all CheckBoxLists labeled for 'radio' to be single-select
    $('[data-toggle=radio]').each(function ()
    {
        var clientId = $(this).attr('id');
        $(this).find('input').each(function ()
        {
            // set parent's id
            $(this).attr('data-parent', clientId);

            // add an onclick to each input
            $(this).click(function (e)
            {
                // ensure proper event
                if (!e) e = window.event;
                var sender = e.target || e.srcElement;
                if (sender.nodeName != 'INPUT') return;


                // toggle off siblings
                var id = $(this).attr('id');
                var parent = $(this).attr('data-parent');
                $('input[data-parent=' + parent + ']').not('#' + id).prop('checked', false);
            });
        });
    });
});
于 2013-12-19T18:15:30.720 に答える
2

RadioButtonList単一の要素しか選択できないため、aの方が適しているように見えます。

ASP.NETRadioButtonListコントロール

ラジオボタンリストのサンプル

RadioButtonListクラス

于 2012-07-27T12:05:40.347 に答える
0 
var id = "";
$("#CblProduct").on('click', ':checkbox', function () {       
    if (id != "")
    {
        $(id).attr('checked', false);
        $(this).attr('checked', true);
    }
    if($("#CblProduct").length > 0)
    {
        id = this;
    }
});
于 2016-02-19T06:03:24.507 に答える
0 
$('input[type=checkbox]').click(function () {
           var chks = document.getElementById('<%= chkBranchRoleTransaction.ClientID %>').getElementsByTagName('INPUT');
            for (i = 0; i < chks.length; i++) {
                    chks[i].checked = false;
            }
            $(this)[0].checked = true;
       });
        // or//
        $('input[type=checkbox]').click(function () {
             var chkBox = document.getElementById('<%= chkBranchRoleTransaction.ClientID %>');
            var chks = chkBox.getElementsByTagName('INPUT');
             for (i = 0; i < chks.length; i++) {
                 chks[i].checked = false;
             }
             $(this)[0].checked = true;
         });
    });[enter image description here][1]


  [1]: http://i.stack.imgur.com/zzaaz.jpg
于 2015-12-15T20:22:20.940 に答える
0 
static int indexOfL=0;// the index of initial selected item
    protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        int i = 0;

        foreach (ListItem li in CheckBoxList1.Items)
        {    
            {
                if (i != indexOfL && li.Selected)
                {    
                    indexOfL=i;
                    CheckBoxList1.ClearSelection();
                    li.Selected = true;

                }
                i++;
            }
        }}

選択したアイテムのインデックスを保存しています。変更があると、2 つの選択されたアイテムが取得されるため、indexOfL の助けを借りて、保持する適切なアイテムを取得します。このコードはサーバー側....お役に立てば幸いです...

于 2016-05-02T14:39:59.380 に答える