复选框文本不可见

时间:2013-06-11 15:40:55

标签: javascript html

我已经找到了我的问题的可能根源,但一直无法这样做。

我有一些动态创建复选框列表的java脚本。有些文本其他文本内部有文本的锚链接。

看起来像这样:

 createCheckbox: function (checkBoxDiv, sensorName, sensorId, checked, makeHyperLink, guid) {
        var liElement = document.createElement("li");
        var checkBoxElement = document.createElement("input");
        checkBoxElement.setType = "checkbox";
        checkBoxElement.name = "sensorName";
        checkBoxElement.id = "check" + sensorId;
        checkBoxElement.setAttribute("type", "checkbox");
        checkBoxElement.setAttribute("runat", "server");
        checkBoxElement.setAttribute("onchange", "OnCheckedChangedMethod('" + sensorName + "')");
        if (checked)
            checkBoxElement.setAttribute("checked", "true");
        if (makeHyperLink) {
            var linkElement = document.createElement("a");
            linkElement.setAttribute("style", "color:white;");
            linkElement.setAttribute("href", "#");
            linkElement.id = "link" + sensorId;
            linkElement.text = "" + sensorName;
            checkBoxElement.appendChild(linkElement);
        } else {
            checkBoxElement.setAttribute("text", sensorName);
        }
        liElement.appendChild(checkBoxElement);
        this.checkboxes++;
        return liElement;
}

这将返回要附加到div的元素。

它正确地创建了这个列表,HTML看起来像这样:

<ol id="sensorList"><li>
      Sensors
    </li><li><input id="check1" type="checkbox" name="sensorName" runat="server" onchange="OnCheckedChangedMethod('0-Predator Simulator (FLIR)')" checked="true"><a id="link1" style="color:white;" href="#">
      Item1
    </a></input></li><li><input id="check2" type="checkbox" name="sensorName" runat="server" onchange="OnCheckedChangedMethod('a')"><a id="link2" style="color:white;" href="#">
      Item2
    </a></input></li>
</ol>

网页如下:

enter image description here

我尝试删除所有的css,因为它与此有关,并将文本嵌套在其他标记中:<p><h1>但没有任何变化。

关于这个问题的根源可能是什么的任何想法。我仍然是网络编程的新手。

由于

1 个答案:

答案 0 :(得分:6)

input元素不能有子元素。所以这个:

checkBoxElement.appendChild(linkElement);

不正确。 而是使用包含复选框和链接的标签元素:

var labelElement = document.createElement("label");
labelElement.appendChild(checkBoxElement);
labelElement.appendChild(linkElement);

编辑: 您无法单击链接元素以更改复选框的选中状态。因为它刷新了页面(href='#')。你想用link元素做什么?