jquery- how to obtain the text shown on screen in a radio button/check box/list/drop down

Question

I am working to parse a form and obtain the values of all elements, including the text boxes, radio buttons, check boxes, list boxes and drop down boxes.

I am currently able to obtain the values for all of the above... By values I mean the value as assigned to that element (eg radio button)... However in some cases the text shown on screen for a value (in a radio/check box/drop down/list) is different from the text actually assigned to that value (when the form is submitted).

For your reference, I am using code similar to the following for obtaining all the 'options' of a list/drop down text box-

  if($(this).is('select'))
         {
            $(this).find('option').each(function(){ 
               alert( " Option value=" + $(this).val() );    
            });            
         }

For check box/radio button I am using val() which obtains all the assigned values.

Code that does this is given below--

 textmsg= textmsg + "...Also, for this element, the value is " + $(this).val() + " and type =" +  $(this).attr('type');
alert (textmsg);

How do I obtain the text value shown on screen (for radio buttons/check boxes/lists /drop down boxes)??

Answer 1

You can do that with jQuery.fn.text().

$(this).text();

Answer 2

For:

1. Radiobuttons: Check what is in the label, belonging to the button like $('#radioid label').html();
2. Checkboxes: see #1 -> html()
3. List item: $('ul#mylist li').html();
4. dropdownbox: like your example, but use our friend html() again :D

Good luck

PS: html() is your friend, but text() as indicated by your commenters will do fine too!