如何根據選擇選項的值更改復選框的值？

我有一個表單，如果選擇了選擇輸入“成員庫”選項，我需要在其中顯示一些復選框。這會動態顯示可用的專案。如果從同一個選擇輸入中有人選擇“免費”，這些復選框將被隱藏并顯示不同的專案。我的代碼中顯示和隱藏了復選框，但是當我隱藏復選框時，我想清除復選框，以便在選擇“免費”選項時取消選中它們。更改選擇選項后，我嘗試將校驗到False更改為False，但我似乎無法上班。我試過把它放在我的raceHide函式中，當我無法讓它作業時，我試著把它變成一個單獨的函式。任何能幫助我朝著正確方向前進的幫助都將不勝感激。

const memberSelect = document.querySelectorAll('.sf-field-post-meta-edu_member select');
function raceHide() {  
  const raceShow = document.querySelectorAll('.searching ul li.sf-field-post-meta-edu_race_approved');
  
  for(var j = 0; j < raceShow.length; j  ) {
    if (memberSelect[j].value === "Member Library") {
      raceShow[j].style.display = "block";
    } else if (memberSelect[j].value === "Free") {
      raceShow[j].style.display = "none";
      
    } else {
      raceShow[j].style.display = "none";
    }    
  } 
}   

for (var i = 0; i < memberSelect.length; i  ) {
  memberSelect[i].addEventListener('change', raceHide, false);
}

function clearRace() {
  var raceCheckboxNo = document.querySelectorAll('.searching ul li.input#sf-input');
  var raceCheckboxYes = document.querySelectorAll('.searching ul li.input#sf-input');

  for(var j = 0; j < raceCheckboxNo.length; j  ) { 
    if (memberSelect[j].value === "Free") {
      raceCheckboxNo[j].checked = false; 
      raceCheckboxYes[j].checked = false;
    }    
  }
}
for (var k = 0; k < memberSelect.length; k  ) {
  memberSelect[k].addEventListener('change', clearRace, false);
}

這是我在丹尼爾的幫助下最終使用的。

const memberSelect = document.querySelectorAll('.sf-field-post-meta-edu_member select');
function raceHide() {  
  const raceShow = document.querySelectorAll('.searchandfilter ul li.sf-field-post-meta-edu_race_approved');
  const raceCheckboxNo = document.querySelectorAll('.searchandfilter ul li.sf-field-post-meta-edu_race_approved ul li input.sf-input-checkbox');
  const raceCheckboxYes = document.querySelectorAll('.searchandfilter ul li.sf-field-post-meta-edu_race_approved ul li:last-child input.sf-input-checkbox');

  for(var j = 0; j < raceShow.length; j  ) {
    if (memberSelect[j].value === "Member Library") {
      raceShow[j].style.display = "block";
    } else if (memberSelect[j].value === "Fear Free on the House") {
      raceShow[j].style.display = "none";
      console.log('TEST')
      raceCheckboxNo[j].checked = "";
      console.log('TEST2')
      raceCheckboxYes[j].checked = "";
      console.log('TEST3') 
    } else {
      raceShow[j].style.display = "none";
    }    
  } 
}   

for (var i = 0; i < memberSelect.length; i  ) {
  memberSelect[i].addEventListener('change', raceHide, false);
}

uj5u.com熱心網友回復：

這是您嘗試做的一個非常簡單的版本。（你沒有分享你的 html，所以我冒昧地做了一些賽馬和汽車比賽。）

您可以將 onchange 函式添加到選擇中（或通過事件偵聽器添加它）。然后通過 switch 塊（或 if else 塊）運行該值，如果選擇的選項具有您想要的“free”值，請通過設定清除所有復選框checked = ""

我沒有隱藏復選框，因為這可以通過 css 輕松完成（并且更難看到選中了哪些復選框）

function hideRaces(el) {
  switch (el.value) {
    case "horses": {
      console.log("horses selected!")
      break;
    }
    case "cars": {
      console.log("cars selected!")
      break;
    }
    case "free": {
      console.log("free all checkboxes!")
      document.getElementById("cars-only-checkbox").checked="";
      document.getElementById("horses-only-checkbox").checked="";
      break;
    }
  }
}

<form>
  <label for="race-type">Race Type</label>
  <select name="race-type" onchange="hideRaces(this);">
    <option value="cars">cars</option>
    <option value="horses">horses</option>
    <option value="free">Free checkboxes</option>
  <select>
  <div>
    <label>
      <input id="cars-only-checkbox" type="checkbox" name="free-horses" checked />
      cars only checkbox
    </label>
    <label>
      <input id="horses-only-checkbox" type="checkbox" name="free-horses" checked />
      horse only checkbox
    </label>
  </div>
</form>

我認為您可能做錯的事情（我認為 false 在技術上應該可以作業）是將它們設定為false而不是空字串""。

如果不是這樣，那么在沒有看到您的 html 的情況下我無能為力，因為問題可能出在您的查詢結構或其他方面。

標籤：javascript 形式

上一篇：'onChange'被多次指定，所以這個用法會被覆寫

下一篇：Django表單：可見分組或分隔欄位