使用js中的getElementById或querySelectorAll在js中獲取輸入id

我有一個表格，其中包含一個專案的不同選項組。用戶需要從每組選項中選擇特定數量的選項。我按選項型別組織了我的表單，我無法控制它是如何組織的，因為它來自 db。選項型別有一個 id。選項型別是（最小、最大和精確），因此用戶需要選擇最小選項、最大選項數量或確切的特定選項#。

最初將表單選項按 分組并運行 js 函式：

let exactlylimit = 0
function Validateexactly(limit) { 
  exactlylimit = limit
  var checks = document.querySelectorAll(".exactly");   
  for (var i = 0; i < checks.length; i  )
    checks[i].onclick = selectiveCheck;
  function selectiveCheck (event) {  
    var checkedChecks = document.querySelectorAll(".exactly:checked");
    if (checkedChecks.length >= exactlylimit   1)
      return false;
  } 
}

使用表單輸入

{#if option['rules'] == "exactly"}

{#each option.optiongroupitems as optionitem, index} 
<li style="list-style : none;">
 
<label>
    <input  type="checkbox" class="exactly" bind:group={values.exactly} value={[{"name" : optionitem.name},{ "price" : optionitem.price }, {"rule" : option.rules}, {"number" : option.rulesnumber.number}]} on:click={()=> Validateexactly(option.rulesnumber.number)} >
     {optionitem.name} : {optionitem.price}
</label>
</li>
{/each}

{/if} 

它作業正常。然后我發現有些專案有多組選項型別。所以一項有 minimum1 組選項和 minimum2 組選項，所以我決定添加每個選項組型別的 id。所以我組織我的小組是這樣的：

所以我按 id 對選項組進行了分組：

{#if option['rules'] == "exactly"}
<p>Exactly id : {option._id}</p>
<fieldset name={option._id}>
 
  <legend><span style="color : red;">{option.groupheader}</span></legend>
{#each option.optiongroupitems as optionitem, index} 

<li style="list-style : none;">
<label>
    <input  type="checkbox" class={option._id} bind:group={values.exactly} on:click={()=> Validateexactly(option.rulesnumber.number, option._id)} >
     {optionitem.name} : {optionitem.price}
</label>
</li>

{/each}
</fieldset>

基本上將類從名稱更改為選項組的 id。

現在在我的 js 中——我使用的是 svelte——我有 validateexactly 函式：

function Validateexactly(limit, id) { 
  console.log(">>>", limit   "  options group id : "  id )
  let getid = id 
  exactlylimit = limit
  var checks = document.getElementById('getid');  
  console.log("checks log :", checks) 
  for (var i = 0; i < checks.length; i  )
    checks[i].onclick = selectiveCheck;
  function selectiveCheck (event) {  
    var checkedChecks = document.getElementById(getid['checked']);
    if (checkedChecks.length >= exactlylimit   1){
      return false;
    }
  } 

如您所見

var checkedChecks = document.getElementById(getid['checked']) 
or 
var checkedChecks = document.getElementById('getid : checked') 

所以我的問題是如何在 getElementById 中參考 id，或者我可以使用 querySelectorAll 但也不知道如何在其中參考 id。
我嘗試了模板文字（模板字串），但我不斷收到無法讀取“null”屬性（讀取“length”）的錯誤，因此 checkedChecks 為 null，這表明我沒有得到檢查的輸入。

我的問題是如何在我的 js getElementById 或 querySelectorAll 中參考 id 我傳遞給我的 validateexactly ：

function Validateexactly(limit, id)

我嘗試了很多方法，但看起來我需要在這里接受一些教育，因為我在控制臺日志中保留了 checkChecks 為空且無法獲取長度的錯誤，從而使整個代碼無用。

uj5u.com熱心網友回復：

要從 訪問 ID querySelectorAll，您只需像在 CSS 中一樣使用#符號參考它。

所以，像：

document.querySelectorAll(`#${getid}[type="checkbox"]:checked`);

應該讓你在 DOM 中匹配的所有復選框，<input type="checkbox" id="<whatever-the-id-is>" checked>也就是說：

• 所有具有給定 id 的復選框（應該只有其中一個，因為它是一個 id - 所以你可能想要使用它document.querySelector()）。
• 目前正在檢查。

如果我理解正確？

標籤：javascript

上一篇：正則運算式查找兩個字符之間的一組字串

下一篇：從嵌套的物件陣列中獲取值