要求选中一定数量的复选框

Question

我在一个表格中显示许多图像并要求用户选择其中的五个。

这是一个表格行的示例：

<tr>
        <td align="center" style="width: 200px; height: 200px"><input id="Image21_flag" name="flag" style="display: none;" type="checkbox" value="img21"/><label class="middlealign" for="Image21_flag"><img onerror="imgError(this);" src="${URL21}" /></label>
        </td>
        <td align="center" style="width: 200px; height: 200px"><input id="Image22_flag" name="flag" style="display: none;" type="checkbox" value="img22"/><label class="middlealign" for="Image22_flag"><img onerror="imgError(this);" src="${URL22}" /></label>
        </td>
        <td align="center" style="width: 200px; height: 200px"><input id="Image23_flag" name="flag" style="display: none;" type="checkbox" value="img23"/><label class="middlealign" for="Image23_flag"><img onerror="imgError(this);" src="${URL23}" /></label>
        </td>
        <td align="center" style="width: 200px; height: 200px"><input id="Image24_flag" name="flag" style="display: none;" type="checkbox" value="img24"/><label class="middlealign" for="Image24_flag"><img onerror="imgError(this);" src="${URL24}" /></label>
        </td>
        <td align="center" style="width: 200px; height: 200px"><input id="Image25_flag" name="flag" style="display: none;" type="checkbox" value="img25"/><label class="middlealign" for="Image25_flag"><img onerror="imgError(this);" src="${URL25}" /></label>
        </td>
    </tr>

我用来确保选择不超过五个的脚本：

$("input[name=flag]").change(function(){
var max= 5;
if( $("input[name=flag]:checked").length == max ){
    $("input[name=flag]").attr('disabled', 'disabled');
    $("input[name=flag]:checked").removeAttr('disabled');
}else{
     $("input[name=flag]").removeAttr('disabled');
}

如何要求至少选择五个？

Answer 1

我不使用 jQuery，但您可以使用 document.querySelectorAll() 来检索所有复选框，并使用示例 Array#filter 拥有一个仅包含选中复选框的数组并检查数组大小是否大于或等于 5。

例子：

const checkboxArray = document.querySelectorAll('.checkbox');
const checkedArray = Array.from(checkboxArray).filter(item => item.checked)
if (checkedArray.length > 5) {
  // More than 5 checkbox checked, do something
}

注意：这可以通过 :checked 在 css 中检查输入 见：https://css-tricks.com/almanac/selectors/c/checked/

Answer 2

试试这样的：

$(function() { 
  $('input[name="flag[]"]').change(function(event) {
    var max = 5;
    if ($('input[name="flag[]"]:checked').length==max)
      $('input[name="flag[]"]').not(':checked').prop('disabled', true);
    else
      $('input[name="flag[]"]').removeAttr('disabled');
  });
  $('form').submit(function(event) {
    if($('input[name="flag[]"]:checked').length!=5) {
      event.preventDefault();
      window.alert("Please select exactly five images");
      return false;
    };
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST">
  <tr>
    <td align="center" style="width: 200px; height: 200px"><input id="Image21_flag" name="flag[]" style="display: none;" type="checkbox" value="img21" /><label class="middlealign" for="Image21_flag"><img onerror="imgError(this);" src="${URL21}" /></label>
    </td>
    <td align="center" style="width: 200px; height: 200px"><input id="Image22_flag" name="flag[]" style="display: none;" type="checkbox" value="img22" /><label class="middlealign" for="Image22_flag"><img onerror="imgError(this);" src="${URL22}" /></label>
    </td>
    <td align="center" style="width: 200px; height: 200px"><input id="Image23_flag" name="flag[]" style="display: none;" type="checkbox" value="img23" /><label class="middlealign" for="Image23_flag"><img onerror="imgError(this);" src="${URL23}" /></label>
    </td>
    <td align="center" style="width: 200px; height: 200px"><input id="Image24_flag" name="flag[]" style="display: none;" type="checkbox" value="img24" /><label class="middlealign" for="Image24_flag"><img onerror="imgError(this);" src="${URL24}" /></label>
    </td>
    <td align="center" style="width: 200px; height: 200px"><input id="Image25_flag" name="flag[]" style="display: none;" type="checkbox" value="img25" /><label class="middlealign" for="Image25_flag"><img onerror="imgError(this);" src="${URL25}" /></label>
    </td>
  </tr>
  <input type="submit">
</form>

Answer 3

我在一个表格中显示许多图像并要求用户选择 其中五个。 [...] 我如何要求至少选择五个？

对此有许多不同的方法，但一种方法是保持活动日志记录有多少复选框被选中和未选中，然后，每次操作需要响应时，检查实时总数并做出相应响应。

工作示例：

// GET DOM ELEMENTS
const myForm = document.getElementsByTagName('form')[0];
const myCheckboxes = [... myForm.querySelectorAll('input[type="checkbox"]')];
const mySubmitButton = myForm.querySelector('input[type="button"]');

// INITIALISE CHECKBOX LOG
let checkboxLog = 0;



 //**************************//
//**************************//



// FUNCTION logCheckedBoxes()
function logCheckedBoxes(event) {

  checkboxLog = (event.target.checked === true) ? checkboxLog + 1 : checkboxLog - 1;
  console.log(checkboxLog + ' boxes checked.');
}


// FUNCTION submitChoices()
function submitChoices() {

  if (checkboxLog === 5) {
    window.alert('5 Choices Submitted!');
  }
  
  else if (checkboxLog < 5) {
    window.alert("You need to select 5 boxes in total.\n\nPlease select " + (5 - checkboxLog) + " more boxes!");
  }
}



 //**************************//
//**************************//



// ADD LOGGING EVENT TO EACH CHECKBOX
for (checkbox of myCheckboxes) {
  checkbox.addEventListener('change', logCheckedBoxes, false);
}


// ADD EVENT TO SUBMIT BUTTON
mySubmitButton.addEventListener('click', submitChoices, false);

<form>

<table>
<tr>
<td><input name="flag" type="checkbox" value="img21" /></td>
<td><input name="flag" type="checkbox" value="img22" /></td>
<td><input name="flag" type="checkbox" value="img23" /></td>
<td><input name="flag" type="checkbox" value="img24" /></td>
<td><input name="flag" type="checkbox" value="img25" /></td>
<td><input type="button" value="Submit Choices!" />
</tr>
</table>

</form>