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)??

You have to show your HTML structure, before we can answer that. — Rob W, Nov 07 '11 at 15:14
http://stackoverflow.com/questions/1910794/jquery-text-vs-html — Hans Wassink, Nov 07 '11 at 15:19

score 1 · Accepted Answer · answered Nov 07 '11 at 15:18

1

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

$(this).text();

answered Nov 07 '11 at 15:18

Avaq

3,009
1
21
25

Correct.... one thing that i noticed is that in multiple choice elements, the text values for all elements are returned together if 'text()' is used... – Arvind Nov 07 '11 at 15:52
Then the selector used gets all elements. `$('option').text()` returns the text of all options together, whereas `$('option:eq(0)').text()` returns the text of only the first option. I think you simply have to filter down your jQuery object to one node, or iterate its nodes with for instance `each()`. – Avaq Nov 07 '11 at 15:57

score 0 · Answer 2 · answered Nov 07 '11 at 15:17

For:

Radiobuttons: Check what is in the label, belonging to the button like $('#radioid label').html();
Checkboxes: see #1 -> html()
List item: $('ul#mylist li').html();
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!

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

2 Answers2