Checking checkboxes

I wrote this code for checking checkboxes. There are two groups of checkbox: each group's checkboxes have one common class all_perks and one individual class perks and perks_admin.

When any checkbox is clicked:

• It will check for same amount checkbox in same group and check them, search for same amount of checkbox in other group and check them, if not found then it will look for nearest and lower amount possible and check all having same amount.

• The amount is described as data-amount='10' and unique id is defined as data-id='1'.

`$(document).ready(function() {

$('.all_perks').click(function() {

var clicked_perk_id = $(this).data('id');
var clicked_perk_amount = $(this).data('amount');
var type = ($(this).hasClass('perks')) ? 'camp' : 'admin';

var perks = [];
var perks_id = [];

var admin_perks = [];
var admin_perks_id = [];

$('.perks').each(function() {
perks.push($(this).data('amount'));
});
$('.perks_admin').each(function() {
admin_perks.push($(this).data('amount'));
});

$('.perks').each(function() {
perks_id.push($(this).data('id'));
});
$('.perks_admin').each(function() {
admin_perks_id.push($(this).data('id'));
});

if ($(this).is(':checked')) {
var checked = 0;
$('.perks').each(function() {
current_perk_id = $(this).data('id');
current_perk_amount = $(this).data('amount');
if (clicked_perk_amount == current_perk_amount) {
$(this).attr('checked', true);
if (type == 'admin') checked++;
}
});

$('.perks_admin').each(function() {
current_perk_id = $(this).data('id');
current_perk_amount = $(this).data('amount');
if (clicked_perk_amount == current_perk_amount) {
$(this).attr('checked', true);
if (type == 'camp') checked++;
}

});
console.log(checked);
if (checked == 0) {
var _compare = [];
va

It certainly seems like there's too much going on. If I understand correctly, clicking a checkbox does 2 things:

• Checks any other checkboxes in the same list, that have the same data-amount

• Checks any checkboxes in the other list that have the same amount, or the ones that are closest to that but below.

However this can be redefined as just one task:

• Within a given group of checkboxes, check those closest or equal to a given amount.

Here's a snippet, which uses that approach.



$(function () { // shorthand for $(document).ready()

// get all checkboxes
var allCheckboxes = $(".perk:checkbox");

// group them by name for later
var groups = {};
allCheckboxes.each(function () {
groups[this.name] || (groups[this.name] = []);
groups[this.name].push(this);
});

// hook up event handling
allCheckboxes.on("change", function (event) {
// reset all checkboxes (easier than having to reset)
allCheckboxes.each(function () { this.checked = false });

// get the clicked checkbox and its amount
var selected = $(this).prop("checked", true);
var amount = selected.data("amount");

// process each group of checkboxes
for(var name in groups) {
if(!groups.hasOwnProperty(name)) { continue }

var group = $(groups[name]);

// get those checkboxes in the group that have an equal or lower amount
var matching = group.filter(function () {
return $(this).data("amount")


Group1:

$ 5

$ 5

$ 10

$ 17

$ 25

$ 49




Group 2:

$ 10

$ 15

$ 15

$ 25

$ 50

$ 100




I've simplified the HTML; since the name attributes already divide the checkboxes into different groups, there's little need for the all_perks/admin_perks. Instead all checkboxes simply share a basic perk class, and are then grouped by their name`.

I've also skipped disabling the checkboxes, but that's simple to add.

StackExchange Code Review Q#81806, answer score: 2