如何计算所选复选框的数量，如何在选中后更改背景以及如何使鼠标悬停继续工作

john 发表于 Dev

约翰

我想创建一个复选框列表，用户可以选择它，但是，将复选框的数量限制为5，并向用户显示他们当前单击了多少。

选择复选框标签后，我还想更改其背景颜色。

我的主要问题是，显示已选中多少个复选框的数字总是落后一格。同样，背景颜色在被选择后会发生变化，但是如果被选择，则悬停呼叫将停止工作。

最后，我很想听听有关如何使计数功能更整洁的任何建议。我不喜欢7个if语句...

$(document).ready(function() {
  $("input[name='group_option[]']").change(function() {
    var maxAllowed = 5;
    var cnt = $("input[name='group_option[]']:checked").length;
    if (cnt > maxAllowed) {
      $(this).prop("checked", "");
    }
  });
});

function count() {

  var count = 0;
  if ($('#checkbox1').is(':checked')) {
    count = count + 1;
  }
  if ($('#checkbox2').is(':checked')) {
    count = count + 1;
  }
  if ($('#checkbox3').is(':checked')) {
    count = count + 1;
  }
  if ($('#checkbox4').is(':checked')) {
    count = count + 1;
  }
  if ($('#checkbox5').is(':checked')) {
    count = count + 1;
  }
  if ($('#checkbox6').is(':checked')) {
    count = count + 1;
  }
  if ($('#checkbox7').is(':checked')) {
    count = count + 1;
  }
  document.getElementById("count").innerHTML = count + "/5 Selected";
}

.options {
  background-color: #e6e6e6;
  display: block;
  width: 300px;
  margin-left: 20px;
  padding: 2px;
  margin-bottom: 1px;
}
.options:hover {
  color: black;
  cursor: pointer;
  transition-duration: .15s;
  background-color: #b3b3b3;
}
input {
  float: left;
}
label:hover {
  background-color: #bfbfbf;
}
input[type=checkbox]:checked + label {
  background-color: #cccccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<b id="count" style="float: left;">0/5 Selected</b>

<br>
<br>

<input id="checkbox1" type="checkbox" name="group_option[]" value="option1" />
<label for="checkbox1" class="options" onclick="count(this)">&nbsp;&nbsp;&nbsp;Option 1</label>
<input id="checkbox2" type="checkbox" name="group_option[]" value="option2" />
<label for="checkbox2" class="options" onclick="count(this)">&nbsp;&nbsp;&nbsp;Option 2</label>
<input id="checkbox3" type="checkbox" name="group_option[]" value="option3" />
<label for="checkbox3" class="options" onclick="count(this)">&nbsp;&nbsp;&nbsp;Option 3</label>
<input id="checkbox4" type="checkbox" name="group_option[]" value="option4" />
<label for="checkbox4" class="options" onclick="count(this)">&nbsp;&nbsp;&nbsp;Option 4</label>
<input id="checkbox5" type="checkbox" name="group_option[]" value="option5" />
<label for="checkbox5" class="options" onclick="count(this)">&nbsp;&nbsp;&nbsp;Option 5</label>
<input id="checkbox6" type="checkbox" name="group_option[]" value="option6" />
<label for="checkbox6" class="options" onclick="count(this)">&nbsp;&nbsp;&nbsp;Option 6</label>
<input id="checkbox7" type="checkbox" name="group_option[]" value="option7" />
<label for="checkbox7" class="options" onclick="count(this)">&nbsp;&nbsp;&nbsp;Option 7</label>

罗里·麦克罗森（Rory McCrossan）

不需要单独的count()函数，因为您可以在jQuerychange事件处理程序中完成所有必需的处理（并且on*事件属性被认为已过时，无论如何都应避免使用）。您已经在其中cnt存储了可以使用的变量。试试这个：

$(document).ready(function() {
  var maxAllowed = 5;
  
  $("input[name='group_option[]']").change(function() {
    var cnt = $("input[name='group_option[]']:checked").length;
    if (cnt > maxAllowed)
      $(this).prop("checked", false);
    else        
      $('#count').text(cnt + '/5 Selected');
  });
});

.options {
  background-color: #e6e6e6;
  display: block;
  width: 300px;
  margin-left: 20px;
  padding: 2px;
  margin-bottom: 1px;
}
.options:hover {
  color: black;
  cursor: pointer;
  transition-duration: .15s;
  background-color: #b3b3b3;
}
input {
  float: left;
}
input:checked + label {
  background-color: #cccccc;
}
input:checked + label:hover {
  background-color: #bfbfbf;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<b id="count" style="float: left;">0/5 Selected</b><br><br>

<input id="checkbox1" type="checkbox" name="group_option[]" value="option1" />
<label for="checkbox1" class="options">&nbsp;&nbsp;&nbsp;Option 1</label>

<input id="checkbox2" type="checkbox" name="group_option[]" value="option2" />
<label for="checkbox2" class="options">&nbsp;&nbsp;&nbsp;Option 2</label>

<input id="checkbox3" type="checkbox" name="group_option[]" value="option3" />
<label for="checkbox3" class="options">&nbsp;&nbsp;&nbsp;Option 3</label>

<input id="checkbox4" type="checkbox" name="group_option[]" value="option4" />
<label for="checkbox4" class="options">&nbsp;&nbsp;&nbsp;Option 4</label>

<input id="checkbox5" type="checkbox" name="group_option[]" value="option5" />
<label for="checkbox5" class="options">&nbsp;&nbsp;&nbsp;Option 5</label>

<input id="checkbox6" type="checkbox" name="group_option[]" value="option6" />
<label for="checkbox6" class="options">&nbsp;&nbsp;&nbsp;Option 6</label>

<input id="checkbox7" type="checkbox" name="group_option[]" value="option7" />
<label for="checkbox7" class="options">&nbsp;&nbsp;&nbsp;Option 7</label>