How to automatically select checkboxes if user input in "wall

I would like my program to automatically select all checkboxes (Specifically "Side 1, Side 2, Side 3 and Side 4") if the wall_amount input is above 3. How would this be done? I have tried this on javascript lines 10-12. Thanks

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

CodePudding user response：

You can use the function setAttribute to check checkboxes. For example, this code (based on your example) will check your element with the id wall_side1.

checkbox_side1.setAttribute("checked", true)

Anyway, try adding this to your code as a function. Then add a conditional statement that runs the function every time your variable exceeds a certain amount.

I am still relatively new at answering questions so I hope this helps!

CodePudding user response：

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