使用jQuery修改未勾选复选框的标签文本颜色

Absolutely! You can easily extend your existing jQuery code to adjust the label text color for unchecked checkboxes when one is selected. Using CSS classes is the cleanest approach (separating style from logic), so let's go with that:

Step 1: Add CSS Classes #

First, define the styles you want for checked and unchecked labels in your CSS:

/* Style for labels of checked checkboxes */
.checked-label {
  color: #000; /* Default or your preferred active color */
}

/* Style for labels of unchecked checkboxes */
.unchecked-label {
  color: #999; /* Your desired muted color for unselected options */
}

Step 2: Update Your jQuery Code #

Modify your existing script to handle label styling whenever a checkbox is changed:

$(document).ready(function(){
  $('.oneBox').on('change', function() {
    // Keep your existing single-selection logic
    $('.oneBox').not(this).prop('checked', false);
    
    // Reset all labels first to remove existing classes
    $('.oneBox').closest('label').removeClass('checked-label unchecked-label');
    
    // Apply classes based on checkbox state
    $('.oneBox:checked').closest('label').addClass('checked-label');
    $('.oneBox:not(:checked)').closest('label').addClass('unchecked-label');
    
    // Your existing result update logic (keep if needed)
    if($(this).is(":checked")) {
      $('#result').html($(this).data("id"));
    } else {
      // Optional: Clear result if checkbox is unchecked
      $('#result').html('');
    }
  });

  // Optional: Set initial state if needed (e.g., no labels styled by default)
  // $('.oneBox').closest('label').addClass('checked-label');
});

How It Works #

• closest('label') targets the parent <label> element of each checkbox, which wraps both the input and the text.
• We first reset all labels by removing the styling classes to avoid leftover styles.
• Then we apply checked-label to the label of the selected checkbox, and unchecked-label to all others.

Alternative: Direct CSS Manipulation (Without Classes) #

If you prefer to skip CSS classes and set styles directly in jQuery (less flexible for future changes), you can replace the class logic with:

// Reset all labels to default color
$('.oneBox').closest('label').css('color', 'inherit');
// Set color for unchecked checkboxes' labels
$('.oneBox:not(:checked)').closest('label').css('color', '#999');

Your original HTML doesn't need any changes—since each checkbox is wrapped in its own <label>, the closest() method will correctly target the right label for each input.

内容的提问来源于stack exchange，提问作者anbhd