輸入欄位編號=復選框的條件能夠選擇如何？

嗨，我想要一些幫助，我為 1-7 號創建了一個輸入欄位，如果 1 號意味著我只能選擇 1 個復選框，但如果選擇了 7 號，是否可以選擇 7 個復選框，我該怎么做？

這是我的代碼

<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>

uj5u.com熱心網友回復：

您可以使用eventListeners檢查復選框的數量是否大于數字輸入的值：

$("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>

標籤：javascript html 查询

上一篇：如何讓填充屬性在svg上作業？

下一篇：在不改變元素位置的情況下變換傾斜