Question

I have a scenario where I want to parse through all the values displayed on screen for a radio button.

Now the radio button can be any one of the following, in coding style–

<input type="radio" name="lunch" value="pasta1" /><span>Pasta</span>

OR

<input type="radio" name="lunch" value="pasta1" /><p>Pasta</p>

OR

<input type="radio" name="lunch" value="pasta1" /><ul>Pasta</ul>

OR <input type="radio" name="lunch" value="pasta1" />Pasta

Basically I have to deal with any type of real world HTML… While I can get the factual value (=”pasta1″ for this example) using val(), I want to obtain the text “Pasta” also as shown above, irrespective of whatever tags may be used, in any combination… Is it possible to get such data? At the very least, is it possible to get (for our examples above) the element pointing to <p>Pasta</p> or <ul>Pasta</ul> and so on? Then I can try and extract the exact text from that element/node…I can use pure javascript or jquery…

Answer 1

if you use this:

$(this).next()

It will give you the very next element to the one you called in your function.

If you find out what control is selected(picked radio button) you just have to get the next controls value.

$(this).next().val()

This way it wont depend on what type you use to put your value in 🙂
Still I would suggest you would use labels.
Those are easier to align with your radio button 😉

Hope this helped.