當單擊 label 元素時，如何在 jquery 中切換 class？

Question

我有以下代碼。 當復選框被選中（隱藏）時，當在頭像周圍按下 label 時，我想將 class “選中”添加到外部 div（pop-friends-item）。

<div class="pop-friends-item">
    <label for="user_1" class="check_friend_item">
    <input name="invited[]" type="checkbox" value="1" id="user_1" style="display:none;">
    <img src="/avatar.jpg"> User 1</label>
</div>
<div class="pop-friends-item">
    <label for="user_2" class="check_friend_item">
    <input name="invited[]" type="checkbox" value="2" id="user_2" style="display:none;">
    <img src="/avatar.jpg"> user 2</label>
</div>

我只是將 class 添加到所有項目中，而不僅僅是單擊的那個。

Answer 1

這只是設置selected的 class。

$("label").click(function() {
    $(this).closest("div").addClass("selected");
};

如果要來回切換：

$("label").click(function() {
    $(this).closest("div").toggleClass("selected");
};

更新

這是處理復選框切換（設置為顯示）的更新 http://jsfiddle.net/qqUHW/1/

$("label").click(function () {
    var $this = $(this);
    $this.closest("div").toggleClass("selected");
    var $checkbox = $("input[type='checkbox']", $this);
    if ($checkbox.prop("checked")) {
        $checkbox.prop("checked", false);
    } else {
        $checkbox.prop("checked", true);
    }
});

Answer 2

這個怎么樣：

$("label.check_friend_item").click(function() {
    $(this).closest("div.pop-friends-item").toggleClass("selected");
    var $checkbox = $(this).find('input[type=checkbox]');
    if ($checkbox.is(':checked')) {
        $checkbox.attr('checked', false);
    } else {
        $checkbox.attr('checked', true);
    }
};

不過，如果您可以使用有效的 HTML，則可能不需要整個復選框。

鏈接到 JsFiddle 示例

Answer 3

如果pop-friends-item始終是 label 的直接父項，這應該不帶復選框

$("label").click(function(){

   $(".selected").removeClass("selected");
   $(this).parent().addClass("selected");

});

如果選擇了多個需要，那么這也應該有效

   $(this).parent().toggleClass("selected");

---

作為替代方案，要實際使用復選框，可以使用change() function，您需要以更易於訪問的方式隱藏復選框：

jQuery：

$('.pop-friends-item input').change(function() {
   if ($(this).is(':checked')) {
      $(this).closest('div').addClass("selected");
   } else {
      $(this).closest('div').removeClass("selected");
   }
});

CSS隱藏輸入而不是display: none; ：

.pop-friends-item input {
   position: absolute;
   clip: rect(1px, 1px, 1px, 1px);
   clip: rect(1px 1px 1px 1px);
}

Answer 4

為確保您只是將 class 添加到正確的 div 中，請通過添加 div 的 class 來進一步限制您的選擇器。

$("label.check_friend_item").click(function() {
      $(this).parents("div.pop-friends-item").toggleClass("selected");
});