Checkboxes will not check in IE7 using Javascript, and yet no errors

Question

Okay I'm totally confused on this one.

I have a script that receives a bunch of values from a JSON object and creates a bunch of checkboxes and either checks or unchecks a these checkboxes based on their values.

The script works correctly in IE8, Firefox3, etc... etc...

However...

In IE7 the script fails to check off the checkboxes. It displays no errors and from what I can tell, the script runs just fine. I just doesn't check any of the checkboxes, and I don't know why...

shoppingCart['Update_Stock_Item_0_NRD%5FHAT2'] = {
  'propeller': {
    'label': 'propeller',
    'optionValues': {
      'on': {
        'selected': 'selected'
      },
      'off': {
        'selected': ''
      },
      '': new String()
    }
  },
  'sunLogo': {
    'label': 'sunLogo',
    'optionValues': {
      'on': {
        'selected': 'selected'
      },
      'off': {
        'selected': ''
      },
      '': new String()
    }
  },
  'MSLogo': {
    'label': 'sunLogo',
    'optionValues': {
      'on': {
        'selected': 'selected'
      },
      'off': {
        'selected': ''
      },
      '': new String()
    }
  }
};

function stockInit() {
  alert("BEGIN: stockInit()");
  // TODO: You will recieve an "on" and an "off" option, 
  //       One will have a "selected" attribute of "selected",
  //       and the other will have a "selected" attribute of ""
  //
  //         The option that has the "selected" attribute of "" 
  //         will generate a checkbox that is not checked.
  //
  //         The option that has the "selected attribute of "selected"
  //       will generate a checkbox that is checked.
  //  
  //         Why? You ask...because that's just the way the thing is 
  //                        setup.
  for (var item in shoppingCart) {
    // // console.log("processing item: " + item);

    var optionContainer = document.getElementById(item + "_optionContainer");

    for (var option in shoppingCart[item]) {
      if (option != "blank") {
        // // console.log("option: " + option);

        var currentOption = shoppingCart[item][option]['optionValues'];

        // // console.log("currentOption['on']['selected']: " + currentOption['on']['selected']);
        // // console.log("currentOption['off']['selected']: " + currentOption['off']['selected']);

        // Really you only have to check the one, but just to be through-o
        var selected = (currentOption['on']['selected'] == 'selected') ? true : false;
        selected = (currentOption['off']['selected'] == 'selected') ? false : true;

        var label = document.createElement("LABEL");
        var labelText = document.createTextNode(shoppingCart[item][option]['label']);
        var optionInput = document.createElement("INPUT");

        var hiddenInput = document.createElement("INPUT");

        optionInput.setAttribute("type", "checkbox");
        optionInput.checked = selected;

        optionInput.setAttribute("id", option);
        alert(optionInput.id);
        alert(optionInput.checked);

        hiddenInput.setAttribute("type", "hidden");
        hiddenInput.setAttribute("name", option);
        hiddenInput.setAttribute("id", option + "_hiddenValue");
        hiddenInput.setAttribute("value", (optionInput.checked) ? "on" : "off");

        label.appendChild(optionInput);
        label.appendChild(labelText);
        label.appendChild(hiddenInput);

        (function(id) {
          optionInput.onclick = function() {
            var hiddenInput = document.getElementById(id + "_hiddenValue");

            hiddenInput.setAttribute("value", (this.checked == true) ? "on" : "off");
            alert("this.id: " + this.id);
            alert("this.checked: " + this.checked);
          }
        })(optionInput.id);

        optionContainer.appendChild(label);
      }
    }
    // // console.log("processing item of " + item + " complete");
  }
  alert("END: stockInit()");
}

And please don't ask why I'm doing things this way...all I can really tell you is that I don't have access to the backend code...so I get what I get...

Answer 1

I guess this is your problem

basically the solution is to additionally do this:

optionInput.defaultChecked = selected;

or alternatively set the checked parameter after inserting the checkbox into the DOM