Question

我有以下代码。当选中复选框（隐藏）时，当在头像周围按下标签时，我想在外部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>

我只是将它添加到所有项目中，而不仅仅是点击的项目。

Answer 1

这只是设置selected类。

$("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，那么整个复选框shebang可能没有必要。

Link to JsFiddle sample

Answer 3

如果pop-friends-item始终是标签的直接父级，则应该在没有复选框的情况下执行此操作

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

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

});

如果选择了多个需求，那么这也应该有效

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

作为替代方案，要使用复选框实际执行此操作，可以使用change()函数，并且您需要以更易于访问的方式隐藏复选框：

<强> 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

要确保您只是将类添加到正确的div中，请通过添加div的类来限制选择器。

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

单击标签元素时如何在jquery中切换类？

4 个答案: