求助：使用jQuery实现Checkbox标签文本切换的问题排查

Hey James, let's work through this issue step by step. Your goal is to toggle the label text between "Add to compare" and "added" when clicking the label (or checkbox), but right now the text only changes once and affects all labels. Here's what's going wrong and how to fix it:

What's Broken in Your Current Code #

1. Targeting All Labels: Using $("label").text(...) selects every <label> on the page, which is why other checkboxes are getting affected. You need to target only the label that was clicked.
2. Arrow Function this Issue: Arrow functions don't bind their own this context, so $(this) wouldn't point to the clicked label. Using event.currentTarget is the right approach, but you weren't using it correctly to target the specific label.
3. Duplicate Click Events: You've bound two separate click events to the same .visible element, which causes unexpected behavior. Plus, addClass(".visible") has an extra dot (it should just be addClass("visible"), though the label already has that class).
4. Fragile Toggle Logic: Your commented-out toggle code was on the right track, but the context of this was wrong, and relying solely on text content can break if the text ever gets modified elsewhere.

Working Solution #

Let's use the checkbox's checked state to drive the text toggle (this is more reliable than checking text, since users might also click the checkbox directly instead of just the label):

Updated jQuery Code (Label Click Listener)

$(document).ready(function() { 
  // Listen for clicks on the label (triggers even when the checkbox is clicked)
  $(".visible").on("click", function(event) { 
    const $clickedLabel = $(event.currentTarget); // Get the specific clicked label
    // Find the linked checkbox using the label's 'for' attribute
    const checkbox = document.getElementById($clickedLabel.attr("for"));
    
    // Toggle text based on checkbox state
    if (checkbox.checked) {
      $clickedLabel.text("added");
    } else {
      $clickedLabel.text("Add to compare");
    }
  });
});

Alternative: Checkbox Change Listener (Covers All Interaction)

This version listens directly to the checkbox's state change, which works whether the user clicks the label or the checkbox itself:

$(document).ready(function() { 
  $("#toggle").on("change", function() { 
    // Get the label associated with this checkbox
    const $label = $(`label[for="${this.id}"]`);
    // Toggle text with a concise ternary operator
    $label.text(this.checked ? "added" : "Add to compare");
  });
});

Your HTML Remains Unchanged

<div class=""> 
  <input id="toggle" type="checkbox" value=""><label for="toggle" class ="visible">Add to compare</label> 
</div>

Key Improvements #

• Targeted Element: Using event.currentTarget (or $(this) in the regular function) ensures we only modify the clicked label, not all labels on the page.
• Reliable State Check: Using the checkbox's checked state instead of text content avoids edge cases where text might be altered manually.
• Clean Event Handling: We're using one focused event handler instead of conflicting multiple ones.

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