CODEWITHSUNDEEP
c#asp.net
rom fernando
rom fernando

Reputation: 71

select a single item in checkbox list using c#

I am using a checkboxlist in asp.net page and bound data from database. Now i want to select the single item. Suppose i select an item means clear the old selection and select the new items only

Please help me to do this..

Upvotes: 1

Views: 35643

Answers (6)

Azadeen Alasd
Azadeen Alasd

Reputation: 57

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++;
            }
        }}

i"m saving the index of selected item and when there is a change we get two selected items so with help of indexOfL we get the right item to keep. i don"t know if this approach is the best because this code runs in the server side.... hope it helps...

Upvotes: 0

SAMU HORO
SAMU HORO

Reputation: 1

var id = "";
$("#CblProduct").on('click', ':checkbox', function () {       
    if (id != "")
    {
        $(id).attr('checked', false);
        $(this).attr('checked', true);
    }
    if($("#CblProduct").length > 0)
    {
        id = this;
    }
});

Upvotes: 0

Bhanu Pratap
Bhanu Pratap

Reputation: 1761

$('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]: https://i.sstatic.net/zzaaz.jpg

Upvotes: 0

usugarbage
usugarbage

Reputation: 51

Using a CheckBoxList over a RadioButtonList can be handy sometimes as it allows a user to unselect a choice without me having to invent a work-around. Following yogi's answer I wanted an approach that allowed easy reuse without having to plug in a ClientID of the CheckBoxList into the function for each use. Thanks for the template yogi.

  • Usage: 

    <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 Function:

    $(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);
            });
        });
    });
});

Upvotes: 5

yogi
yogi

Reputation: 19591

Try this

Front end

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>

Back end

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

But instead of doing all this you should consider RadioButtonList control

Upvotes: 6

Leandro Gomide
Leandro Gomide

Reputation: 1008

Looks like a RadioButtonList would fit better, as it only lets you select a single element.

ASP.NET RadioButtonList Control

Radio-Buttonlist Sample

RadioButtonList Class

Upvotes: 2

Related Questions