Find particular CheckListItem in CheckBoxList control using Javascript or jQuery

Question

I have a CheckBoxList that displays a list of checkboxes using data from a table.

While the records in this table is expected to change, the last item is expected to have a text value of Other with an expected value.

If the user selects "Other", I want to be able to enable an associated text box where they enter a specified "Other" description. I want to be able to do this on the client using Javascript or jQuery.

Since the IDs individual list items are dynamically created is there a way that I can avoid hard coding something like:

chkOther = document.getElementbyID("checkListItem12_chkOccupationOther")

I don't know jQuery, but I figure that that Library probably provides a nice way to get control using a matching ID mask, for example.

Suggestions?

Jon P · Accepted Answer · 2011-07-25 05:02:21Z

1

If you can guarantee that your "Other" Check box is always last you can use the last selector. Using the ID of the check box list:

$(document).ready(function() {
    $("#<%=YourCheckBoxList.ClientID%> input:checkbox:last").click(function(){
       if(this.checked)  {          
          //Enable Text Box Here
       }else{
          //Disable here 
       }
    });
});

EDIT: Updated to remove the unnecessary convert of "this" to a jQuery object as per RobG's Comment.

edited Jul 25, 2011 at 5:02

answered Jul 25, 2011 at 1:07

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jon P Over a year ago

Updated the example to show how to test if the radio button is checked.

RobG Over a year ago

Please either cache the $ or get rid of it. Much more efficient to just test if (this.checked)

RobG · Accepted Answer · 2011-07-25 02:23:55Z

1

You can do this with plain JS quite easily. I'll guess that your checkboxes are in a form, so you start by getting the form then add a listener to the last checkbox:

function addClick() {
  var form = document.forms['f0'];
  var input, inputs = form.getElementsByTagName('input');
  var i = inputs.length;

  while (i--) {
    input = inputs[i];

    if (input.type == 'checkbox') {
      input.onclick = function() {
        if (this.checked) {

          // Do stuff...
          alert('checked!');

        } else {
          // Put stuff in here if unchecked, probably
          // want to hide whatever is shown when above
          // is clicked
        }
      }
      // Going backward, the first checkbox found is the
      // last one so stop after first one found
      return;
    }
    input = null;
  }
}

Then add the function as a bottom script, using a DOM ready function or window.onload.

answered Jul 25, 2011 at 2:23

RobG

148k32 gold badges180 silver badges216 bronze badges

3 Comments

Jon P Over a year ago

I believe this would only work if the Check Box is the last check box in the form, not just the last check box in the check box list. Instead of grabbing the form, try grabbing the check box list: cbList = document.getElementByID('<%=YourCheckBloxList.ClientID%>'); inputs = cbList.getElementsByTagName('input');

RobG Over a year ago

The first line of my answer says "I'll guess that your checkboxes are in a form", so yes, it's for checkboxes in a form. If the OP wants to use some other base element (e.g. document), that's fine too.

Jon P Over a year ago

Rob, the OP states that he is using a check box list ASP.net web control. It would be entirely possible that he would have other check boxes following the check box list. My comment was to cover any subsequent check boxes in the form. As I read it your code will always add the listener to the last check box in the form, which may not actually be the desired check box.

Collectives™ on Stack Overflow

Find particular CheckListItem in CheckBoxList control using Javascript or jQuery

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related