faqts : Computers : Programming : Languages : JavaScript : DHTML

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

13 of 19 people (68%) answered Yes
Recently 6 of 10 people (60%) answered Yes

Entry

Can I have a group of html elements react like a radio group where one element is in an on state while the others are off?

Apr 2nd, 2000 05:20
Guest,


The following code tries to provide that behaviour for a group of html 
elements with an object constructor
  RadioGroup
to which you pass
  - an array of html elements
  - an on style class name
  - an optional off style class name
  - an optional event handlers array
The code has some complexity mainly to get it working with NN4 where 
complex layer setup and rewriting is necessary to achieve the style 
change. The code for IE4+ and NN6/6 is rather easy as any object can 
have an onclick handler and you simply change styles by setting
  elementRef.className = 'newStyleClassname'
<HTML>
<HEAD>
<STYLE>
.lime {
  background-color: lime;
}
.buttonOff {
  background-color: orange;
  color: white;
}
.buttonOn {
  background-color: white;
  color: orange;
}
</STYLE>
<SCRIPT>
if (document.layers) {
  var html = '';
  html += '<STYLE>';
  html += ' .scriptable {';
  html += '   position: absolute;';
  html += ' }';
  html += ' .placeholder { ';
  html += '   position: relative;';
  html += '   visibility: hidden;';
  html += ' }';
  html += ' <\/STYLE>';
  document.write(html);
}
</SCRIPT>
<SCRIPT>
function RadioGroup (elements, onStyle, offStyle, evtHandlers) {
  this.id = RadioGroup.cnt;
  RadioGroup.groups[RadioGroup.cnt++] = this;
  this.elements = elements;
  this.length = elements.length;
  this.htmlElements = new Array(this.length);
  this.onStyle = onStyle;
  this.offStyle = offStyle || '';
  this.evtHandlers = evtHandlers || new Array();
  this.writeElements();
}
function RadioGroup_writeElements () {
  for (var i = 0; i < this.elements.length; i++) {
    var html = '';
    var id = 'RG' + this.id + 'B' + i;
    if (document.all || document.getElementById) {
      html += '<SPAN ID="' + id + '"';
      html += this.offStyle ? ' CLASS="' + this.offStyle + '"' : '';
      html += ' STYLE="';
      html += document.all ? ' cursor: hand;' : ' cursor: pointer;';
      html += '"';
      html += ' ONCLICK="RadioGroup.groups[' + this.id + '].check(' + i 
+ ');"';
      html += '>';
      html += this.elements[i];
      html += '<\/SPAN>';
    }
    else if (document.layers) {
      html += '<SPAN ID="' + id + '"';
      html += ' CLASS="scriptable"';
      html += '>';
      html += this.getStyleElement(this.elements[i], this.offStyle);
      html += '<\/SPAN>';
      html += '<SPAN ID="' + id + 'PH"';
      html += ' CLASS="placeHolder"';
      html += '>';
      html += this.getStyleElement(this.elements[i], this.offStyle);
      html += '<\/SPAN>';
    }
    html += i < this.length - 1 ? ' ' : '';
    document.write(html); 
  }
}
RadioGroup.prototype.writeElements = RadioGroup_writeElements;
function RadioGroup_getStyleElement(el, style) {
  var html = '';
  html += '<SPAN';
  html += style ? ' CLASS="' + style + '"' : '';
  html += '>';
  html += el;
  html += '<\/SPAN>';
  return html;
}
RadioGroup.prototype.getStyleElement = RadioGroup_getStyleElement;
function RadioGroup_check (elNo) {
  for (var i = 0; i < this.length; i++) 
    if (i == elNo)
      this.setStyle(i, this.onStyle)
    else
      this.setStyle(i, this.offStyle);
  if (this.evtHandlers[elNo])
    eval(this.evtHandlers[elNo])
}
RadioGroup.prototype.check = RadioGroup_check;
function RadioGroup_setStyle (elNo, style) {
  if (!this.htmlElements[elNo]) {
    var id = 'RG' + this.id + 'B' + elNo;
    this.htmlElements[elNo] =
      document.all ? document.all[id] :
      document.getElementById(id);
  }
  if (document.all || document.getElementById)
    this.htmlElements[elNo].className = style;
  else if (document.layers) {
    var l = this.htmlElements[elNo];
    l.document.open();
    l.document.write(this.getStyleElement(this.elements[elNo], style));
    l.document.close();
  }
}
RadioGroup.prototype.setStyle = RadioGroup_setStyle;
function RadioGroup_init () {
  for (var b = 0; b < this.length; b++) {
    var id = 'RG' + this.id + 'B' + b;
    var l = this.htmlElements[b] = 
      document[id];
    l.captureEvents(Event.MOUSEDOWN);
    l.onmousedown = 
      new Function ('evt', 
        'RadioGroup.groups[' + this.id + '].check(' + b + ')'
      );
  }
}
RadioGroup.prototype.init = RadioGroup_init;
RadioGroup.cnt = 0;
RadioGroup.groups = new Array();
RadioGroup.init = function () {
  if (document.layers)
    for (var r = 0; r < RadioGroup.groups.length; r++)
      RadioGroup.groups[r].init();
}
</SCRIPT>
<SCRIPT>
function init () {
  RadioGroup.init();
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init();">
<SCRIPT>
var rg =
  new RadioGroup (
    new Array ('Kibo', 'Xibo', 'Maho'),
    'lime'
  );
</SCRIPT>
<BR>
<SCRIPT>
new RadioGroup (
  new Array (
    'JavaScript.FAQTs.com', 
    'Php.FAQTs.com', 
    'Python.FAQTs.com'
  ),
  'buttonOn',
  'buttonOff',
  new Array (
    'window.status = "JavaScript"',
    'window.status = "Php"',
    'window.status = "Python"'
  )
);
</SCRIPT>
</BODY>
</HTML>