使用剃鬚刀爲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的任何想法，將不勝感激。或者我還會就如何顯示和檢查複選框以及它的價值提供更好的建議。

來源

2015-09-04 Giles

你確定它得到正確的'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" 
};

和我們有它...

來源

2015-09-08 19:35:56 Giles

使用剃鬚刀爲DIV和CHECKBOX動態生成唯一ID

回答

相關問題