Controll HTMLB:Checkbox via JavaScript

Question

Hi all,
I`ve created a BSP application containing HTMLB:Checkbox components.
In this example the checkboxes are organized as a three of 2 levels.
When clicking/checking the parent checkbox, I want the rest of the checkboxes (children) to change status depending on their parent's status. e.g checked=true/false and disabled=true/false. The checkboxes become disabled/enabled, but you cannot see any change in their checked/unchecked status.
Though this works fine with design="classic", it doesn't when using design="design2003"...
I have to use design2003 in my application, and want to use HTMLB:Checkbox instead of regular HTML Checkbox- which also works.
The javascript syntax follows:
(it's from a loop containing all the children checkboxes)
nodeEl = elements<i>;
nodeEl.checked = true/false;
nodeEl.disabled = false/false;
I would have appreciated any kind of help.
Ogert

Answer 1

This is my intire code, Raja T. The Javascript works fine with regular HTML Checkbox, or HTMLB:Checkbox combined with classic design.
**HTML CODE
<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>
<%<htmlb:content design="classic">%>
<htmlb:content design="design2003">
  <htmlb:document>
  <htmlb:documentHead>
  <script language='javascript' src='control_checkbox.js'></script>
  </htmlb:documentHead>
    <htmlb:form>
<table width="309" border="1">
  <tr>
    <td width="299" bgcolor="#999999">
    <htmlb:checkbox id        = "E1"
                    text      = "Parent"
                    checked   = "true"
                    onClientClick = "check_chkbox('E1');"/>
    </td>
  </tr>
  <tr>
    <td><htmlb:checkbox id        = "00111820|Chk0102|E1"
                    text      = "Child 1.1.1.2"/>
    </td>
  </tr>
  <tr>
    <td><htmlb:checkbox id        = "00111820|Chk0103|E1"
                    text      = "Child 1.1.1.3"/>
    </td>
  </tr>
    </htmlb:form>
  </htmlb:document>
</htmlb:content>
**Javascript Code:
var forms;
var elements;
function check_chkbox(id) {
  var el;
  var nodeEl;
  var splitname;
  var ind = 2;
  var name = id;
  var tempname = split_name(id,'',ind);
  if(tempname != '') {
    ind = 1;
    name = tempname;
  getCheckBoxes();
  el = document.getElementById(id);
  if(!eval(el.checked)) {
    for(i = 0; i < elements.length; i++) {
      splitname = split_name(elements<i>.id,name,ind);
      if(splitname != '') {
        if(elements<i>.id != id && name == splitname) {
          nodeEl = elements<i>;
          nodeEl.checked = false;
          nodeEl.disabled = true;
  else {
    for(i = 0; i < elements.length; i++) {
      splitname = split_name(elements<i>.id,name,ind);
      if(splitname != '') {
        if(elements<i>.id != id && name == splitname) {
          nodeEl = elements<i>;
          nodeEl.checked = true;
          nodeEl.disabled = false;
function split_name(name,splitname,ind) {
  var split_array = name.split("|");
  var size = split_array.length;
  var string;
  if(size == 3) {
    if(splitname != '') {
      string = split_array[ind];
      array = string.split(splitname);
      if(array[0] == '') {
        return splitname;
    string = split_array[1];
    return string;
  return '';
function getCheckBoxes() {
  var tempArray = new Array();
  if(elements == null) {
    tempArray = document.all;
<%--    case Firefox, Netscape --%>
    if(tempArray == null) {
      forms = document.forms;
      tempArray = forms[0];
    elements = new Array();
    for(i = 0; i < tempArray.length; i++) {
      if(tempArray<i>.getAttribute("type") == "checkbox") {
        elements[elements.length] = tempArray<i>;