Use same class for different checkboxes using jQuery

Use same class for different checkboxes using jQuery

I have a multiselect dropdown which has 8 colors in a hash %all_colors:

my %all_colors = (
    1 => 'Red',
    2 => 'Yellow',
    3 => 'Orange',
    4 => 'Blue',
    5 => 'Black',
    6 => 'Brown',
    7 => 'Green',
    8 => 'White',
);

I have put it in a dropdown like this:

my $color_selector = '<select name="all_colors">';

foreach my $color (sort {$all_colors{$a} cmp $all_colors {$b}} keys %all_colors ) {
    $color_selector .= qq~<option value="$color">$all_colors{$color}</option>~;
}
$color_selector .= '</select>';

<div><% $color_selector %></div>

Now I want to add 2 new checkboxes.

<div>
    <input type="checkbox" name="maincolors" value="1" class="inputCheckbox" /> Main Colors
    <input type="checkbox" name="resetofcolors" value="1" class="inputCheckbox" /> Rest of the Colors
</div>

And in Perl, I added one more constant to select checkbox1 and use constant in perl to call the checkbox. I dont know how to use this to select these 4 values in dropdown when "Main Colors" checkbox is checked. And Rest of colors should

be checked when clicked on "Rest of the Colors" checkbox.

use constant MAIN_COLORS => {
    1 => 'Red',
    2 => 'Orange',
    3 => 'Green',
    4 => 'White',
};

my $main_colors = MAIN_COLORS;

I have written a HTML code for checkbox and jQuery to select colors from dropdown on click of checkbox.

<div>
    <input type="checkbox" data-class="maincolors" name="maincolors" value="<% $main_colors %>" class="inputCheckbox" /> Main Colors
    <input type="checkbox" data-class="restofcolors" name="resetofcolors" class="inputCheckbox" /> Rest of the Colors
</div>

jQuery(document).ready(function () {
  jQuery('input[name="colorcheckbox"]').click(function () {
    var isselect       = '';
    var main_colors    = jQuery('input[data-class="main-colors"]').val().split('|');
    var colorsToSelect = jQuery(this).val();

    if (jQuery(this).prop('checked')) {
        isselect = 'selected';
    }

    if (jQuery(this).data('class') == 'main-colors') {
        for (var i=0; i < main_colors.length; i++) {
            jQuery('#allcolors option[value=' + main_colors[i] + ']').prop('selected', isselect);
        }
    } else {
        for (var i=0; i < jQuery('#allcolors option').length; i++){
            if (jQuery.inArray(jQuery('#allcolors option')[i].value, main_colors) < 0) {
                jQuery('#allcolors option')[i].selected = isselect;
            }
        }
    }

    if (jQuery(this).prop('checked') == true) {
        if (colorsToSelect == 'maincolors') {
            jQuery('#multipeColorSelect option').prop('selected', true);
        } else if (colorsToSelect == 'restofcolors') {
            jQuery('#multipeColorSelect option').prop('selected', true);
        }
    } else {
        if (colorsToSelect == 'maincolors') {
            jQuery('#multipeColorSelect option').prop('selected', false);
        } else if (colorsToSelect == 'restofcolors') {
            jQuery('#multipeColorSelect option').prop('selected', false);
        }
    }
  });

  jQuery('#allcolors').change(function() {
    jQuery('.inputCheckbox').prop('checked', false);
  });
});

If I want to add one more checkbox in future which includes one of the main colors group, then I want to add a different class which is not a good idea. So my requirement is: For now for the above code, I dont want to use different classes "maincolors" and "restofcolors", instead want to solve this using the same class(only one class for all checboxes). Please help.