如果“wall_amount”中的用户输入超过 3，如何自动选择复选框答案

【问题标题】：How to automatically select checkboxes if user input in "wall_amount" exceeds 3如果“wall_amount”中的用户输入超过 3，如何自动选择复选框
【发布时间】：2021-10-27 08:29:47
【问题描述】：

如果 wall_amount 输入高于 3，我希望我的程序自动选择所有复选框（特别是“第 1 面、第 2 面、第 3 面和第 4 面”）。这将如何完成？我已经在 javascript 第 10-12 行尝试过这个。谢谢

HTML

                    <label for="wall_amount">Number of Walls</label>
                    <input type="number" value="1" min="1" max="4" step="1" id="wall_amount" name="wall_amount"></input>
                    <div>
                        Please choose where you want the walls placed
                        <label for="wall_side1">Side 1</label>
                        <input type="checkbox" id="wall_side1" name="wall_side1"></input>
            
                        <div style="display: inlineblock;">
                            <label for="wall_side2">Side 2</label>
                            <input type="checkbox" id="wall_side2" name="wall_side2"></input>
            
                            <img class="img2" src="images/reference.png" alt="Bouncy Castle">
            
                            <label for="wall_side3">Side 3</label>
                            <input type="checkbox" id="wall_side3" name="wall_side3"></input>
                        </div>
                        <label for="wall_side4">Side 4</label>
                        <input type="checkbox" id="wall_side4" name="wall_side4"></input>
                    </div>

Javascript

var base_length = Number(document.getElementById("base_length").value);
    var base_width = Number(document.getElementById("base_width").value);
    var walltype = Number(document.getElementById("walltype").value);
    var checkbox_side1 = document.getElementById("wall_side1");
    var checkbox_side2 = document.getElementById("wall_side2");
    var checkbox_side3 = document.getElementById("wall_side3");
    var checkbox_side4 = document.getElementById("wall_side4");

var wall_amount = Number(document.getElementById("wall_amount").value);
$("input:checkbox").click(function() {
    let max = $("#wall_amount").val();
    var bol = $("input:checkbox:checked").length >= max;
    $("input:checkbox").not(":checked").attr("disabled", bol);
  });


$("wall_amount").on('keyup', function () {
    $('checkbox_side1').prop('checked', +$(this).val() > 3);
});

【问题讨论】：

标签： javascript html forms

【解决方案1】：

您可以使用函数 setAttribute 来检查复选框。例如，此代码（基于您的示例）将使用 id wall_side1 检查您的元素。

checkbox_side1.setAttribute("checked", true)

无论如何，请尝试将此作为函数添加到您的代码中。然后添加一个条件语句，每次您的变量超过一定数量时运行该函数。

我在回答问题方面还比较陌生，所以我希望这会有所帮助！

【讨论】：

我似乎无法让它与我的代码一起工作，你能在我的代码中实现它吗？如果您需要整个代码，请询问
是的，我需要完整的代码才能正确测试。可以发给我链接吗？或者可以将所有必要的文件复制到 GitHub 项目（例如图像“images/reference.png”）？
我知道怎么做，但感谢您的帮助
您应该在此处发布您找到的任何方法作为答案，以便其他寻找答案的人知道您做了什么。 ?

【解决方案2】：

const checkboxes = [
  "wall_side1",
  "wall_side2",
  "wall_side3",
  "wall_side4"
].map((id) => document.getElementById(id));

const amountInput = document.getElementById("wall_amount");

amountInput.addEventListener("change", (event) => {
  const value = parseInt(event.target.value || 0);
  if (value === 4) {
    checkboxes.forEach(
      checkbox => {
        checkbox.disabled = true;
        checkbox.checked = true;
      }
    );
  } else {
    checkboxes.forEach(
      checkbox => {
        checkbox.disabled = false;
      }
    );
  }
});

【讨论】：