如何根据 select 选项的值更改复选框的值？

Question

我有一个表单，如果 select 输入“成员库”选项被 select 编辑，我需要在其中显示一些复选框。这会动态显示可用的项目。如果来自同一个 select 输入某人 select 的“免费”，这些复选框将被隐藏并显示不同的项目。我在我的代码中显示和隐藏了复选框，但是当我隐藏复选框时，我想清除复选框，以便在“免费”选项为 selected 时取消选中它们。当 select 选项更改时，我试图将选中的更改为 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);
}

这是我在 Daniel 的帮助下最终使用的。

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);
}

Answer 1

这是您尝试执行的操作的非常简单的版本。（你没有分享你的html，所以我做了一些自由，把它变成了赛马和赛车。）

您可以向 select 添加一个 onchange 函数（或者像您一样通过事件侦听器添加它）。然后运行通过开关块（或 if else 块）的值，如果选项 selected 具有您想要的“免费”值，请通过设置 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 的情况下我也无能为力，因为问题可能出在您的查询结构或其他方面。

如何根据 select 选项的值更改复选框的值？

How can I change the value of a checkbox based on the value of a select option?

javascript

forms