2013-06-11 40 views
1

我已经查找了我的问题的可能根源,但一直无法这样做。复选框文本不可见

我有一些动态创建复选框列表的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>但没有任何更改。

关于这个问题的根源可能是什么的任何想法。我对网络编程还很陌生。

谢谢

+0

你可以添加一个JSFiddle来演示吗?另外你为什么要把runat = server放在那里? – Ian

+0

http://jsfiddle.net/4estP/ – Zac

回答

6

input元素不能生小孩。所以这个:

checkBoxElement.appendChild(linkElement); 

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

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

编辑: 您不能点击链接元素改变复选框选中的状态。因为它刷新页面(与href='#')。你想用链接元素做什么?

+0

不错,赶上,(对我)可怕的写作方式,HTML停止了我看到嵌套在'输入' –

+0

我使用委托来指派一个函数链接 – Zac

+0

谢谢你,不知道你不能有一个孩子的输入,为什么这是“写一个可怕的HTML的方式”? @DavidThomas所以​​我可以改进它。 – Zac