选择两个单独的下拉选项时，是否限制复选框？

Question

选择特定的值组合时，我试图限制复选框的选项。

我有一个名称为toneCapArray的检查组，当选择value="bp"和value="master-tone"时，我想限制该复选框。这些值在最后两个选择框中指定。

我刚学习JS几个月，就遇到了障碍。选择这两个值时，我无法运行该函数。

checkboxlimit(toneCapArray, 1);函数直接在函数定义下运行时，它将起作用。

但是，当我通过查看两个函数是否都正确时来调用该函数：(item.value === "bp" && item.value === "master-tone")它不起作用，并且我没有收到任何错误或任何有助于调试它的信息。

复制：

取消注释小提琴的第28行，并尝试选择3个复选框。
注释行28和注释行37
在选择框3和4中选择主色调和搅拌器锅，然后尝试再次选中3个复选框。

其他问题：

我在8个选择框上有一个事件侦听器，但是我只需要事件侦听器来侦听两个。听多个选择框并听取值可以吗？
我计划将其扩展为运行相同的功能，但在选择单独的单选按钮时使用不同的参数，但是我认为我将从这里开始。我希望这是可扩展的。

FIDDLE：

JS FIDDLE

function masterCheckboxLimit() {
  //set up the locations:

  const toneCapArray = document.getElementsByName("addon-3987-tone-cap-2[]");
  var select = document.querySelectorAll("select");

  //limit the checkboxes:

  function checkboxlimit(checkgroup, limit) {
    for (var i = 0; i < checkgroup.length; i++) {
      checkgroup[i].addEventListener("click", function () {
        var checkedcount = 0;
        for (var i = 0; i < checkgroup.length; i++) {
          checkedcount += checkgroup[i].checked ? 1 : 0;
          if (checkedcount > limit) {
            window.alert("You can only select a maximum of " + limit + " tone caps");
            this.checked = false;
          }
        }
      });
    }
  }


  //select the select boxes and add a change event listener

  select.forEach((item) => {
    item.addEventListener("change", (e) => {

      if (document.getElementsByName("pa_tone-pot-1")[0].value === "master-tone" && document.getElementsByName("pa_tp-2")[0].value === "bp"){
    checkboxlimit(toneCapArray, 1); //I want this function to run when both are true above
    });
  });
}
masterCheckboxLimit();

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <h1>Product Options:</h1>
    <p>
      <select name="pickup_location" id="" label="">
        <option value="">Select an Option</option>
        <option value="complete_set">Complete Set</option>
        <option value="neck">Neck</option>
        <option value="bridge">Bridge</option>
      </select>
    </p>

    <p>
      <select name="pickup_color" id="" label="">
        <option value="">Select an Option</option>
        <option value="black">Black</option>
        <option value="white">White</option>
      </select>
    </p>

    <p>
      <select name="tone_pot_1" id="" label="">
        <option value="">Select an Option</option>
        <option value="neck_middle_tone">Neck and Middle Tone</option>
        <option value="master-tone">Master Tone</option>
      </select>
    </p>
    <p>
      <select name="tone_pot_2" id="" label="">
        <option value="">Select an Option</option>
        <option value="bp">Blender Pot</option>
        <option value="bridge-tone">Bridge Tone</option>
      </select>
    </p>

    <h2>Add Ons:</h2>

    <p><input type="checkbox" id="1" name="addon-3987-tone-cap-2[]" value="Cap 1" label="Cap 1" /><label for="1">Tone Cap 1</label></p>
    <p><input type="checkbox" id="2" name="addon-3987-tone-cap-2[]" value="Cap 2" label="Cap 2" /><label for="2">Tone Cap 2</label></p>
    <p><input type="checkbox" id="3" name="addon-3987-tone-cap-2[]" value="Cap 3" label="Cap 3" /><label for="3">Tone Cap 3</label></p>
  </body>

</html>

我的代码中有什么明显的地方吗？

Answer 1

我在您的代码中看到2个问题

1-始终为false，因此永远不会进入if块。

if (item.value === "bp" && item.value === "master-tone")

因为"bp" !== "master-tone" item.value不能两者都相等（除非那里有骇人的吸气剂）

2-您正在寻找一个值[[bp，但该值不在HTML代码中]

由于您正在寻找不存在的东西，所以这也可能起到了作用。
更新：
我认为以下可运行的代码段将满足您的要求，请检查一下。

function masterCheckboxLimit() { const tone_pot_1 = document.querySelector('#tone_pot_1') const tone_pot_2 = document.querySelector('#tone_pot_2') const checkboxes = document.querySelectorAll('input[type=checkbox]') let maxNumberOfMarkedCheckBoxesAllowed = 3 let curNumberOfMarkedCheckBoxesAllowed = 0 function selectsOnChangeEvent(e) { if (tone_pot_1.value === 'master-tone' && tone_pot_2.value === 'bp') { maxNumberOfMarkedCheckBoxesAllowed = 1 if (curNumberOfMarkedCheckBoxesAllowed > maxNumberOfMarkedCheckBoxesAllowed) { checkboxes.forEach(checkbox => { checkbox.checked = false }) curNumberOfMarkedCheckBoxesAllowed = 0 alert(`If you have master-tone and bp you can only check 1 box. Please make your selection again`) } } else { maxNumberOfMarkedCheckBoxesAllowed = 3 } } function checkBoxOnClickEvent(e) { const number = this.checked ? 1 : -1 if (curNumberOfMarkedCheckBoxesAllowed + number > maxNumberOfMarkedCheckBoxesAllowed) { alert('Nope') return e.preventDefault() } curNumberOfMarkedCheckBoxesAllowed += number console.log({ number, curNumberOfMarkedCheckBoxesAllowed, maxNumberOfMarkedCheckBoxesAllowed }) } [tone_pot_1, tone_pot_2].forEach((checkbox) => { checkbox.addEventListener('change', selectsOnChangeEvent) }) checkboxes.forEach((checkbox) => { checkbox.addEventListener('click', checkBoxOnClickEvent) }) } masterCheckboxLimit();
label { cursor: pointer; } #selects, #checkboxes { float: left }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="selects"> <h1>Product Options:</h1> <p> <select name="pickup_location" id="pickup_location" label=""> <option value="">Select an Option</option> <option value="complete_set">Complete Set</option> <option value="neck">Neck</option> <option value="bridge">Bridge</option> </select> </p> <p> <select name="pickup_color" id="pickup_color" label=""> <option value="">Select an Option</option> <option value="black">Black</option> <option value="white">White</option> </select> </p> <p> <select name="tone_pot_1" id="tone_pot_1" label=""> <option value="">Select an Option</option> <option value="neck_middle_tone">Neck and Middle Tone</option> <option value="master-tone">Master Tone</option> </select> </p> <p> <select name="tone_pot_2" id="tone_pot_2" label=""> <option value="">Select an Option</option> <option value="bp">Blender Pot</option> <option value="bridge-tone">Bridge Tone</option> </select> </p> </div> <div id="checkboxes"> <h2>Add Ons:</h2> <p><input type="checkbox" id="1" name="addon-3987-tone-cap-2[]" value="Cap 1" label="Cap 1" /><label for="1">Tone Cap 1</label></p> <p><input type="checkbox" id="2" name="addon-3987-tone-cap-2[]" value="Cap 2" label="Cap 2" /><label for="2">Tone Cap 2</label></p> <p><input type="checkbox" id="3" name="addon-3987-tone-cap-2[]" value="Cap 3" label="Cap 3" /><label for="3">Tone Cap 3</label></p> </div> </body> </html>

选择两个单独的下拉选项时，是否限制复选框？

问题描述投票：0回答：1

复制：

其他问题：

FIDDLE：

1个回答

1-始终为false，因此永远不会进入if块。

2-您正在寻找一个值[[bp，但该值不在HTML代码中]

最新问题

选择两个单独的下拉选项时，是否限制复选框？

问题描述 投票：0回答：1

复制：

其他问题：

FIDDLE：

1个回答

1-始终为false，因此永远不会进入if块。

2-您正在寻找一个值[[bp，但该值不在HTML代码中]

最新问题

问题描述投票：0回答：1