Question

我目前正在使用HTML和JavaScript进行一个有趣的项目。我创建了一个包含复选框部分的表单，我想在其中将最大选项设置为一个。

当前HTML：

<legend>Choose</legend> 
<ul class="checkbox"> 
  <li><input type="checkbox" id="cb1" value="1" /><label for="cb1">1</label></li> 
  <li><input type="checkbox" id="cb2" value="2" /><label for="cb2">2</label></li> 
  <li><input type="checkbox" id="cb3" value="3" /><label for="cb3">3</label></li> 
  <li><input type="checkbox" id="cb4" value="4" /><label for="cb4">4</label></li> 

</ul>

如果您选中多个框，则会出现错误。有什么建议吗？

Answer 1

您可以使用单选按钮。但还是要使用复选框，然后检查以下示例

var countChecked = function() {
  var n = $( "input:checked" ).length;
  if(n>1){
  alert('more then one')
  }
};
countChecked();
 
$( "input[type=checkbox]" ).on( "click", countChecked );

<html>
<head></head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<legend>Choose</legend> 
<ul class="checkbox"> 
  <li><input type="checkbox" id="cb1" value="1" class='cb' /><label for="cb1">1</label></li> 
  <li><input type="checkbox" id="cb2" value="2" class='cb' /><label for="cb2">2</label></li> 
  <li><input type="checkbox" id="cb3" value="3" class='cb' /><label for="cb3">3</label></li> 
  <li><input type="checkbox" id="cb4" value="4" class='cb' /><label for="cb4">4</label></li> 

</ul>
</body>
</html>

Answer 2

使用prop('checked')查找是否选中了另一个复选框，希望这会有所帮助

$('input[type="checkbox"]').change(function() {

  if($(this).prop('checked'))
  {
  var status = 0;
  $(this).parent().siblings().find('input[type="checkbox"]').each(function(e){
    if($(this).prop('checked')){
          $(this).prop('checked',false)
          status = 1;
       }
  
     })
  
  }
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<legend>Choose</legend> 
<ul class="checkbox"> 
  <li><input type="checkbox" id="cb1" value="1" /><label for="cb1">1</label></li> 
  <li><input type="checkbox" id="cb2" value="2" /><label for="cb2">2</label></li> 
  <li><input type="checkbox" id="cb3" value="3" /><label for="cb3">3</label></li> 
  <li><input type="checkbox" id="cb4" value="4" /><label for="cb4">4</label></li> 

</ul>

Answer 3

如果只想选择一个，请使用<input type="radio">。如果需要添加限制> 1，也可以使用以下实现。只需更改MAX_CHECKED值：

var MAX_CHECKED = 2;
var checkboxes = document.querySelectorAll('input');

for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', function(event) {
    var checked = document.querySelectorAll('input:checked');
    if (checked.length > MAX_CHECKED) {
      event.target.checked = false;
      alert('Too many checked already!');
    }
  });
}

<legend>Choose</legend>
<ul class="checkbox">
  <li><input type="checkbox" id="cb1" value="1" /><label for="cb1">1</label></li>
  <li><input type="checkbox" id="cb2" value="2" /><label for="cb2">2</label></li>
  <li><input type="checkbox" id="cb3" value="3" /><label for="cb3">3</label></li>
  <li><input type="checkbox" id="cb4" value="4" /><label for="cb4">4</label></li>
</ul>

在复选框中设置检查值的最大值

3 个答案: