选择复选框=要输入多少？答案

【问题标题】：Select checkbox = to the number of input?选择复选框=要输入多少？
【发布时间】：2021-12-31 06:35:44
【问题描述】：

最初我有我的代码，如果用户选择 1 - 7，用户只能根据用户可以选择的数量来选择复选框

现在我希望如果用户单击复选框而不是星期一它在输入上显示 1 如果用户选择所有 7 天输入将是 7 我现在该怎么做？

// Checkbox = input choose
$("input[type='checkbox']").change(function() {
  let max = $(".weeklyInput").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'].weeklyInput").change(function() {
  let max = $(".weeklyInput").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>
<input class="weeklyInput" type="number" name="weekly" value="1" min="1" max="7"><label class="textweekly">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>

【问题讨论】：

不是很清楚你想要什么。您想根据选中的复选框更新类型编号的输入吗？我说的对吗？

标签： javascript html jquery

【解决方案1】：

看起来这是您要求的。试试看。

// Checkbox = input choose
$("input[type='checkbox']").change(function() {
  let max = $(".weeklyInput").val(); //times per week value
  let cbx = $("input[type='checkbox']:checked").length; //number of checkboxes checked
  $('.weeklyInput').val(cbx);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="weeklyInput" type="number" name="weekly" value="0" min="1" max="7"><label class="textweekly">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>

【讨论】：

【解决方案2】：

有点难以理解您的要求，但我认为您的意思是您的数字输入决定了用户可以检查的最大天数。如果是这种情况，这里有一个解决方案。

https://jsfiddle.net/a4872msr/2/

将您现有的输入（包括每周数字输入）包装在 <form> 标记中。然后，试试这个 JavaScript：

// Add a single event listener on the outer element
document.querySelector('form').addEventListener('change', (e) => {
  // Determine how many inputs are checked
  const checkedCount = document.querySelectorAll('form input:not([name="weekly"]):checked').length;

  // Loop through each input that isn't the weekly numeric input
  for (const inputEl of document.querySelectorAll('form input:not([name="weekly"])')) {
    // Is the checked out greater than the max we want?  Disable all the elements!
    inputEl.disabled = checkedCount >= Number.parseInt(document.querySelector('input[name="weekly"]').value);
  }

});

【讨论】：