如果“wall_amount”中的用戶輸入超過3，如何自動選擇復選框

如果 wall_amount 輸入高于 3，我希望我的程式自動選擇所有復選框（特別是“Side 1、Side 2、Side 3 和 Side 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);
});
   

uj5u.com熱心網友回復：

您可以使用函式 setAttribute 來檢查復選框。例如，此代碼（基于您的示例）將使用 id wall_side1 檢查您的元素。

checkbox_side1.setAttribute("checked", true)

無論如何，嘗試將其作為函式添加到您的代碼中。然后添加一個條件陳述句，每次變數超過一定數量時運行該函式。

我在回答問題方面仍然相對較新，所以我希望這會有所幫助！

uj5u.com熱心網友回復：

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

標籤：javascript html 形式

上一篇：從選擇下拉串列中檢索物件

下一篇：在react-hook-forms表單中動態添加或洗掉專案并注冊輸入？