使用jQuery对不同的复选框使用相同的类

我有一个多选下拉列表，在哈希%all_colors中有8种颜色：

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

我把它放在这样一个下拉列表中：

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>

我已经为checkbox和jQuery编写了一个HTML代码，用于在单击checkbox时从下拉列表中选择颜色

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

my $main_colors = MAIN_COLORS;

<div>
    <input type="checkbox" data-class="maincolors" name="colorcheckbox" value="<% $main_colors %>" class="inputCheckbox" /> Main Colors
    <input type="checkbox" data-class="restofcolors" name="colorcheckbox" 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);
  });
});

---

如果我想在将来添加一个复选框，其中包括一个主颜色组，那么我想添加一个不同的类，这不是一个好主意。所以我的要求是：现在对于上面的代码，我不想使用不同的类maincolors和restofcolors，而是想用同一个类解决这个问题，所有复选框只使用一个类。请提供帮助。

如果您想使代码具有可扩展性，您需要想出更通用的方法来解决您试图解决的问题。如果要添加更多复选框，则需要找到一种方法来轻松表示需要的所有表单数据复选框值、复选框标签以及分组将表示的颜色组合：

my @color_data = (
   { value => 'main', title => 'Main Colors', colors => [ 1, 3, 7, 8 ] },
   { value => 'combo1', title => 'Combination 1', colors => [ 2, 4, 5, 6 ] },
   { value => 'combo2', title => 'Combination 2', colors => [ 1, 2, 3, 6 ] }
);

您可以看到，我们拥有创建表单元素所需的数据，并且颜色数组包含来自您的哈希%all_的ID，该组合中颜色的所有颜色。现在，让我们创建表单：

# create the checkboxes using @color_data:
my $html = '';
for (@color_data) {
   $html .= "<input type='checkbox' name='colorcheckbox' value='" 
     . $_->{value} . "' id='colorcbox_" 
     . $_->{value} . "' />\n<label for='colorcbox_" 
     . $_->{value} . "'>" . $_->{title} . "</label>\n"
}
say $html;

输出：

<option value='Red' data-class='main combo2'>Red</option>
<option value='Yellow' data-class='combo1 combo2'>Yellow</option>
<option value='Orange' data-class='main combo2'>Orange</option>
<option value='Blue' data-class='combo1'>Blue</option>
<option value='Black' data-class='combo1'>Black</option>
<option value='Brown' data-class='combo1 combo2'>Brown</option>
<option value='Green' data-class='main'>Green</option>
<option value='White' data-class='main'>White</option>

以下是结果表：

<fieldset>
<input type='checkbox' name='colorcheckbox' value='main' id='colorcbox_main' />
<label for='colorcbox_main'>Main Colors</label>
<input type='checkbox' name='colorcheckbox' value='combo1' id='colorcbox_combo1' />
<label for='colorcbox_combo1'>Combination 1</label>
<input type='checkbox' name='colorcheckbox' value='combo2' id='colorcbox_combo2' />
<label for='colorcbox_combo2'>Combination 2</label>
</fieldset>
<fieldset>
<label for='colorselect'>Pick some colours!</label>
<select name='all_colors' id='colorselect' multiple='multiple' size='8'>
<option value='Red' data-class='main combo2'>Red</option>
<option value='Yellow' data-class='combo1 combo2'>Yellow</option>
<option value='Orange' data-class='main combo2'>Orange</option>
<option value='Blue' data-class='combo1'>Blue</option>
<option value='Black' data-class='combo1'>Black</option>
<option value='Brown' data-class='combo1 combo2'>Brown</option>
<option value='Green' data-class='main'>Green</option>
<option value='White' data-class='main'>White</option>
</select>
</fieldset>

生成此表单的完整代码：

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

my @color_data = (
   { value => 'main', title => 'Main Colors', colors => [ 1, 3, 7, 8 ] },
   { value => 'combo1', title => 'Combination 1', colors => [ 2, 4, 5, 6 ] },
   { value => 'combo2', title => 'Combination 2', colors => [ 1, 2, 3, 6 ] }
);
my $html = "<fieldset>\n";
for (@color_data) {
   $html .= "<input type='checkbox' name='colorcheckbox' value='" . $_->{value} . "' id='colorcbox_" . $_->{value} . "' />\n<label for='colorcbox_" . $_->{value} . "'>" . $_->{title} . "</label>\n"
}
$html .= "</fieldset>\n<fieldset>\n<label for='colorselect'>Pick some colours!</label>\n<select name='all_colors' id='colorselect' multiple='multiple' size='" . (scalar keys %all_colors) . "'>\n";

for my $c (sort keys %all_colors) {
    $html .= "<option value='$all_colors{$c}' data-class='" . join(" ", grep defined, map { if (grep { $_ eq $c } @{$_->{colors}} ) { $_->{value} } else { } } @color_data) . "'>$all_colors{$c}</option>\n";
}
$html .= "</select>\n</fieldset>\n";

say $html;

---

现在，表单生成已经过时了，您可以集中精力编写javascript了

我已将您的代码放入JSFIDLE中，但它不起作用：代码中有几个错误您在发布到这里之前检查过吗？是的，我检查了，但我无法找到我的错误所在。它在JSFIDLE中不起作用，因为其中有perl代码。它也不起作用，因为javascript代码中有许多错误，例如，第一行引用输入[name=colorcheckbox]，但您的代码中不存在此类输入。我现在在输入复选框中更正了我的代码

# join together the members of an array with a space
join(" ", 
# grep takes only the defined members of the array
grep defined,
# map: for every member of the array color_data
map { 
      # if $c exists in the array $_->{colors} (i.e. the list of colours)
      if (grep { $_ eq $c } @{$_->{colors}} )
      # output $_->{value} if it does ('main', 'combo1', 'combo2', etc)
      { $_->{value} } 
      # otherwise, output undefined (this has to be here or perl outputs '0')
      else { } 
} @color_data)

<fieldset>
<input type='checkbox' name='colorcheckbox' value='main' id='colorcbox_main' />
<label for='colorcbox_main'>Main Colors</label>
<input type='checkbox' name='colorcheckbox' value='combo1' id='colorcbox_combo1' />
<label for='colorcbox_combo1'>Combination 1</label>
<input type='checkbox' name='colorcheckbox' value='combo2' id='colorcbox_combo2' />
<label for='colorcbox_combo2'>Combination 2</label>
</fieldset>
<fieldset>
<label for='colorselect'>Pick some colours!</label>
<select name='all_colors' id='colorselect' multiple='multiple' size='8'>
<option value='Red' data-class='main combo2'>Red</option>
<option value='Yellow' data-class='combo1 combo2'>Yellow</option>
<option value='Orange' data-class='main combo2'>Orange</option>
<option value='Blue' data-class='combo1'>Blue</option>
<option value='Black' data-class='combo1'>Black</option>
<option value='Brown' data-class='combo1 combo2'>Brown</option>
<option value='Green' data-class='main'>Green</option>
<option value='White' data-class='main'>White</option>
</select>
</fieldset>

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

my @color_data = (
   { value => 'main', title => 'Main Colors', colors => [ 1, 3, 7, 8 ] },
   { value => 'combo1', title => 'Combination 1', colors => [ 2, 4, 5, 6 ] },
   { value => 'combo2', title => 'Combination 2', colors => [ 1, 2, 3, 6 ] }
);
my $html = "<fieldset>\n";
for (@color_data) {
   $html .= "<input type='checkbox' name='colorcheckbox' value='" . $_->{value} . "' id='colorcbox_" . $_->{value} . "' />\n<label for='colorcbox_" . $_->{value} . "'>" . $_->{title} . "</label>\n"
}
$html .= "</fieldset>\n<fieldset>\n<label for='colorselect'>Pick some colours!</label>\n<select name='all_colors' id='colorselect' multiple='multiple' size='" . (scalar keys %all_colors) . "'>\n";

for my $c (sort keys %all_colors) {
    $html .= "<option value='$all_colors{$c}' data-class='" . join(" ", grep defined, map { if (grep { $_ eq $c } @{$_->{colors}} ) { $_->{value} } else { } } @color_data) . "'>$all_colors{$c}</option>\n";
}
$html .= "</select>\n</fieldset>\n";

say $html;