John John - 4 months ago 12
HTML Question

How to count number of checkboxes selected, change background after selected, and have hover continue to work

I want to create a list of checkboxes that users can select, however, limit the number of checkboxes to 5, as well as show the user how many they have currently clicked.

I also want to change the background color of the checkbox labels after they have been selected.

My main problem is that the number showing how many checkboxes have been selected is always one click behind. Also, the background color is changing after being selected, but the hover call stops working if selected.

Finally, I'd love to hear any suggestions on how to make my count function cleaner. I don't like having 7 if statements...



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




Answer

There's no need for your separate count() function as you can do all the required processing in your jQuery change event handler (and on* event attributes are considered outdated and should avoided anyway). You already have the cnt variable stored there which you can use. Try this:

$(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;
}
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">&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>