Checkboxlist + getting id's of all the checkboxes

Question

Hi,

How do I get the id's of all the checkboxes generated by a checkboxlist, with datatable as its data source?

I think I have to use the "OnDataBinding" event of the checkbox list, but I don't see how that will help me.

I am using C#

I don't think getting the id's of all the check boxes generated by the check box list is possible, so I think going the moo tools way is the right thing to do.

Any ideas?

Thanks

Answer 1

Are you using VB or C#..please tag accordingly

You can have List or string called strchklist

VB.NET

For Each li In CheckBoxList1.Items 
       If li.Selected Then 
            strchklist += li.Id 
      End If 
  Next

C#

foreach (ListItem li in CheckBoxList1.Items){ 
       If li.Selected
            strchklist += li.Id ;}

Answer 2

The <asp:ListItem> is not really a Control itself therefore has no ID. If you want to access it in client script add a new attribute you can reference. (yes, during OnDataBinding) Remember that these are not persisted in the ViewState however!

What exactly are you trying to accomplish? May help to elaborate somewhat.

Answer 3

Completely different answer...

The CheckBoxList is a bit of an odd duck... unlike other controls, it does not really have a logical mapping to an obvious HTML construct. It actually renders multiple checkboxes with derivative IDs. Those IDs seem to be generated as CheckBoxList.ClientID + "_" + ItemIndex.

You can verify this by looking at the page source. Internally, it seems the ID of the individual checkbox control is just its index, and then it's rendered with the CheckBoxList as its NamingContainer. You can use Reflector is see how the CheckBoxList control renders the output.

Still a good spot for jQuery. Just easier now you know the IDs.

Answer 4

I woke up this morning and thought of doing this (cblUSEquities is a checkbox list)

cblUSEquities.Attributes.Add("onclick", "javascript:alert('Clicked');");

This adds the alert to the table that the checkbox list generates. One thing to note is, the alert shows up twice If I click the text of the checkbox and once if I click the checkbox. I think this solution will work for me.

BTW, I never thought that the above code would work...

P.S Answering my own question because I wanted to write some code, which I cannot do using the comment box.

In the spirit of StackOverFlow, I arrived to something which works in my scenario but the description of the question is different? What do I do? Edit the question and mark this as answer?

Answer 5

I was able to do this by using mootools and this is the code.

function ToggleSelection(ctrl, sender)
{
    var cblCtrl = $(ctrl);
    var Allcbs = cblCtrl.getElements('input');

    for(var i=0; i<Allcbs.length; i++)
        Allcbs[i].checked = sender.checked;
}

function ToggleSelectAll(ctrl, sender)
{
    var AllTrueCount = 0;
    var cblCtrl = $(ctrl);
    var Allcbs = sender.getElements('input');

    for(var i=0; i<Allcbs.length; i++)
        if(Allcbs[i].checked)
            AllTrueCount++;

    if(AllTrueCount == Allcbs.length)
        cblCtrl.checked = true;
    else
        cblCtrl.checked = false;
}

C# code which calls the javascript functions

//Binding event to the checkbox list
cblUSEquities.Attributes.Add("onclick", string.Format("javascript:ToggleSelectAll('{0}', this);", chkAllUSEquities.ClientID));

//binding event to the select all checkbox
chkAllUSEquities.Attributes.Add("onclick", string.Format("javascript:ToggleSelection('{0}', this);", cblUSEquities.ClientID));

As it turns out I did not need to know the id's of all the checkboxes generated by the checkbox list. I was able to add the onclick javascript to those checkboxes by this line

cblUSEquities.Attributes.Add("onclick", string.Format("javascript:ToggleSelectAll('{0}', this);", chkAllUSEquities.ClientID));

Which will add the onclick event to the table that the checkbox list generates.

Answer 6

Ideally you would want to just attach the click event handlers to all your checkbox lists in the domReady event and this will create a much simpler function with MooTools. However, you can keep your code as-is if you prefer and just make your 2 functions a little simpler.

function ToggleSelection(ctrl, sender) {
  var checkboxes = $(ctrl).getElements('input[type=checkbox]');
  checkboxes.set('checked', sender.checked);
}

function ToggleSelectAll(ctrl, sender) {
  var fAllChecked = ($(sender).getElements('input:checked').length == $(sender).getElements('input[type=checkbox]').length)
  $(ctrl).set('checked', fAllChecked);
}

You can set the properties of your entire ELements array at once, you don't need to loop through them. In the 2nd function, I'm checking the number of elements that are checked against the total number of checkboxes and if they match that means they are all checked.