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

I have a form in which I need to show some checkboxes if a select input "member library" option is selected. This dynamically shows items available. If from the same select input someone selects "free" these checkboxes are hidden and different items are displayed. I have the showing and hiding of the checkboxes working in my code but when I'm hiding the checkboxes I would like to clear the checkboxes so that they are unchecked if the "free" option is selected. I have tried to change the checked to false when the select option is changed but I can't seem to get to work. I have tried putting it inside my raceHide function and when I could not get that to work and I tried making it a separate function. Any help in steering me in the right direction would be greatly appreciated.

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

This is what I ended up using based on Daniel's help.

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

CodePudding user response：

Here is a very simplistic version of what you were trying to do. (You didn't share your html, so I took some liberties and made it horse and car races.)

You can add an onchange function to the select (or add it via event listener as you were doing). Then run the value through a switch block (or if else block) and if the option selected has the value of "free" like you wanted, clear all the checkboxes by setting checked = ""

I am not hiding the checkboxes as that can easily be done with css (and it would make it harder to see which checkboxes are checked)

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>

I think what you might be doing wrong (I think false should technically work) is setting them to false instead of an empty string "".

If that is not it, there is not much I can help with without seeing your html as the problem could be in your query structure or something different.