Condition with Input field number = checkbox able to select how?

Question

Hi i would like some help where i have created a input field for number 1 - 7 where if number 1 mean i can only select 1 checkbox but if number 7 are choosen is it able to select 7 checkbox how can i do it ?

Here my code

<div class="container position">
  <div class="row">
    <input class="inputStyle" type="number" value="1" min="1" max="7"><label class="timeStyle">times per week</label>
    <div class="container-fluid">
      <div class="box">
        <input type="checkbox" id="monday" name="monday" value="Monday">
        <label for="monday"> Monday</label><br>
        <input type="checkbox" id="tuesday" name="tuesday" value="Tuesday">
        <label for="tuesday"> Tuesday</label><br>
        <input type="checkbox" id="wednesday" name="wednesday" value="Wednesday">
        <label for="wednesday"> Wednesday</label><br>
        <input type="checkbox" id="thursday" name="thursday" value="Thursday">
        <label for="thursday"> Thursday</label><br>
        <input type="checkbox" id="friday" name="friday" value="Friday">
        <label for="Friday"> Friday</label><br>
        <input type="checkbox" id="saturday" name="saturday" value="Saturday">
        <label for="saturday"> Saturday</label><br>
        <input type="checkbox" id="sunday" name="sunday" value="Sunday">
        <label for="Sunday"> Sunday</label><br>
      </div>
    </div>

  </div>

</div>

Does this answer your question? [How to implement "select all" check box in HTML?](https://stackoverflow.com/questions/386281/how-to-implement-select-all-check-box-in-html) — seantsang, Dec 28 '21 at 07:12
hi it does not as i wan my input field to match the number as is not selecting all same 1 mean i can only select 1 checkbox regardless of monday - sunday if 2 mean i can select 2 checkbox regardless of monday - sunday and so on until 7 where i can choose all — Flow, Dec 28 '21 at 07:16

Tom · Accepted Answer · 2021-12-28T10:15:41.743

You can use eventListeners to check if the number of checkboxes checked is bigger than the value of the number input :

$("input[type='checkbox']").change(function(){
  let max = $(".inputStyle").val(); //times per week value
  let cbx = $("input[type='checkbox']:checked").length; //number of checkboxes checked
  if (cbx > max) { 
    $(this).prop("checked", false); //cancels the check
  }
});

$("input[type='number'].inputStyle").change(function(){
  let max = $(".inputStyle").val(); //times per week value
  let cbx = $("input[type='checkbox']:checked").length; //number of checkboxes checked
  if (cbx > max) {
    $("input[type='checkbox']:checked").prop("checked", false); //uncheck all checked checkboxes
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container position">
  <div class="row">
    <input class="inputStyle" type="number" value="1" min="1" max="7"><label class="timeStyle">times per week</label>
    <div class="container-fluid">
      <div class="box">
        <input type="checkbox" id="monday" name="monday" value="Monday">
        <label for="monday"> Monday</label><br>
        <input type="checkbox" id="tuesday" name="tuesday" value="Tuesday">
        <label for="tuesday"> Tuesday</label><br>
        <input type="checkbox" id="wednesday" name="wednesday" value="Wednesday">
        <label for="wednesday"> Wednesday</label><br>
        <input type="checkbox" id="thursday" name="thursday" value="Thursday">
        <label for="thursday"> Thursday</label><br>
        <input type="checkbox" id="friday" name="friday" value="Friday">
        <label for="Friday"> Friday</label><br>
        <input type="checkbox" id="saturday" name="saturday" value="Saturday">
        <label for="saturday"> Saturday</label><br>
        <input type="checkbox" id="sunday" name="sunday" value="Sunday">
        <label for="Sunday"> Sunday</label><br>
      </div>
    </div>

  </div>

</div>

Condition with Input field number = checkbox able to select how?

1 Answers1