Question

I have a set of 3 radio buttons, with these element IDs:

id='details_first'
id='details_second'
id='details_third'

How do I get all the elements whose id starts with 'details_' ?

EDIT

What I’m actually trying to do is this:
Each radio button has an associated div that I want to display when the radio button is clicked. At one time only one radio button is active, so only div for that radio button should be shown (all others should be hidden). So the code for this that I have is:
(sorry, it’s a bit wide):

<input id="details_first" name="details" type="radio" value="first"  onclick="$('details_*').hide();$('details_first_div').show();" />First<br/>
<div id="details_first_div" style="display:none">div for details_first</div>

<input id="details_second" name="details" type="radio" value="second"  onclick="$('details_*').hide();$('details_second_div').show();" />Second<br/>
<div id="details_second_div" style="display:none">div for details_second</div>

Or is there a better best-practice way to do this kind of thing? (I’m using Ruby on Rails).
Maybe by selecting by name attribute – but how ?

Answer 1

You should create an event handler on the form which manages all the clicks. You should do a selection because you only care for the <input> fields with name == details.

Then you can hide all the divs in your <form> starting with a specified id, and show only the one with clicked element's id + _div ending.

Finally you can remove the event handlers from your markup.

See a working demo.

var form = $("FORM_ID");
form.observe( 'click', function(event)  {
  var el = event.element();
  if ( el.name == "details" ) {
    // select: #FORM_ID div#details_*
    idStartsWith("details_", "div", form).invoke("hide");
    $(el.id + "_div").show();
  }
});

/**
* Selecting elements by how their id starts
*
* @param text - starting of the id
* @param tag  - filter results by tag name [optional]
* @param root - root of the selection      [optional]
*/
function idStartsWith(text, tag, root) {
  root = root || document;
  tag  = tag || "*";
  var arr = root.getElementsByTagName(tag);
  var len = arr.length;
  var ret = [];
  for ( var i = 0; i < len; i++ ) {
    if ( arr[i].id.indexOf( text ) === 0 )
      ret.push(arr[i]);
  }
  return ret;
}