使用剃须刀为DIV和CHECKBOX动态生成唯一ID

问题描述：

这是我的拳头问题，请原谅我，如果它构造不好。使用剃须刀为DIV和CHECKBOX动态生成唯一ID

我在学习C#MVC 5与Entity-Framework 6。

我试图用javascript显示和检查checkbox，它是被封装在一个div内，这样我可以隐藏/显示完整checkbox和价值文本。

然而，我正在努力为div和checkbox创建一个独特的ID="??"，以便我的JavaScript可以根据需要访问DOM的每个部分。

下面是我的看法代码：

@foreach (var item in ViewBag.allDocketTypes) 
    { 
     <div id="DockDIV @item.DocketTypeID" style="display:none" class="col-md-6"> 
      <input type="checkbox" class="input" id="DockCB @item.DocketTypeID" name="selectedDocketTypes" value="@item.DocketTypeID" />@item.DocketClassification 
     </div> 
    }

接下来是我使用的检查checkbox并更改.style = "display:none"为div到.style = "display:block"现在我的JavaScript函数：

function addDocketType() { 
    var e = document.getElementById("DocketClassification"); 
    var strDocketTypeID = e.options[e.selectedIndex].value; 

    document.getElementById("DockCB " & strDocketTypeID).checked = true; 
    document.getElementById("DockDIV " & strDocketTypeID).style = "display:block"; 
};

现在，当javascript执行时，出现以下错误：

Uncaught TypeError: Cannot set property 'checked' of null

有关如何正确设置这些对象的id的任何想法，将不胜感激。或者我还会就如何显示和检查复选框以及它的价值提供更好的建议。

你确定它得到正确的'strDocketTypeID'这里？另外，请考虑在ID中使用下划线'_'，而不是空格。空间可能会导致问题。最后，如果使用MVC中相当标准的'jQuery'，这段代码会变得更简单。你有没有考虑过它/你能够使用它吗？ –

我没有考虑过'jQuery'。有关如何工作的任何建议？ – Giles

'_'似乎已经整理出来了。我还发现我需要将'＆'更改为'+'，最后我需要改变将'.style'设置为'.style.display =“block”'的方式'感谢您的帮助，尽管@stephen .vakil – Giles

答

我设法解决这一帮助和指针从@ stephen.vakil +1你，如果我能:)

总之它是所有关于语法...

在查看使用_试图用razor语法内嵌在javascript创建一个唯一的ID

@foreach (var item in ViewBag.allDocketTypes) 
    { 
     if (item.TypeSelected) 
      { 
       <div id="[email protected]" style="display: block" class="form-group-sm"><input type="checkbox" class="form-control" id="[email protected]" name="selectedDocketTypes" value="@item.DocketTypeID" checked="checked"/>@item.DocketClassification</div> 
      } 
     else 
      { 
       <div id="[email protected]" style="display: none" class="form-group-sm"><input type="checkbox" class="form-control" id="[email protected]" name="selectedDocketTypes" value="@item.DocketTypeID" title="TEST"/>@item.DocketClassification</div> 
      } 
    }

连接字符串与+完成时。

function addDocketType() { 
    var e = document.getElementById("DocketClassification"); 
    var strDocketTypeID = e.options[e.selectedIndex].value; 

    document.getElementById("DockCB_" + strDocketTypeID).checked = true 
    document.getElementById("DockDIV_" + strDocketTypeID).style.display = "block" 
};

和我们有它...

使用剃须刀为DIV和CHECKBOX动态生成唯一ID

相关推荐