Javascript jQuery复选框第二次不起作用

我有带锚和复选框的html。现在，当用户选择锚定，我想选中复选框到最近的锚定

例如，如果我单击要选中

Travel

anchor Travel复选框，然后我单击要选中

Kids

anchor Kids复选框，并从锚点添加/删除

active

类

在我的示例中，它只使用第一个锚点选择，当您选择任何其他锚点时，它将不工作，并且不会选中任何复选框

这是我的JSFIDLE：

问题是

$（'：checked'）。如果选中页面中的任何一个复选框，length

将返回一个真实值

您可以使用如下切换来简化逻辑

$(".instagram-details a").click(function () {        
    $(this).toggleClass('active');
    $(this).find(':checkbox').prop('checked', $(this).hasClass('active'));
});

在这里，我们首先切换单击的锚元素的活动类，然后使用锚元素是否具有活动类来设置复选框的选中状态

---

演示：

相反，您可以使用

：

$（函数（）{
$（“输入：复选框”）。单击（函数（）{
如果（选中此项）
$（此）.最近的（“标签”）.addClass（“活动”）；
其他的
$（此）.最近的（“标签”）.removeClass（“活动”）；
});
});
label.active{
字体大小：粗体；
}

体育
徖生署；健身
摄影
游戏娱乐
食物
旅行
生活方式
汽车
时尚
美女
青年
技术
婚礼
冒险
奢侈
纹身
挑衅的
宠物
孩子们
建筑学
艺术与艺术；设计
仅更改以下内容：

 if ($(':checked').length) {

用这个

 if (ele.prop("checked")) {

它是有效的

fiddle:
如果可以重新构造HTML，就不需要使用JS。您可以使用同级选择器和复选框的
：checked
属性来更改相应标签的样式

您可以使用
标签



：选中+标签{
颜色：红色；
}

体育
徖生署；健身
摄影
游戏娱乐
食物
旅行
生活方式
汽车
时尚
美女
检查这个

$(".instagram-details a").click(function () {
    var ele = $(this).closest('a').find(':checkbox');
    if ($(ele).prop('checked')) {
        ele.prop('checked', false);
        $(this).removeClass('active');
    } else {
        ele.prop('checked', true);
        $(this).addClass('active');
    }
});

使用以下命令更改代码

$(".instagram-details a").click(function () {
    var ele = $(this).closest('a').find(':checkbox');

    if (ele.prop('checked')) {
        ele.prop('checked', false);
        $(this).removeClass('active');
    } else {
        ele.prop('checked', true);
        $(this).addClass('active');
    }
});

您可以在一行
$（this.find（'：checkbox'）.prop（'checked'，$（this.toggleClass（'active'））.hasClass（'active'））中执行同样的操作。这是你更新的答案，如果你认为这会改善答案，请随意添加代码：）@AlexChar在这种情况下没关系，你也可以使用
~
，你已经看过演示，但我同意，
+
是better@Tushar在这种情况下为True并不重要，但最好（至少对我来说）使用
+
$(".instagram-details a").click(function () {
    var ele = $(this).closest('a').find(':checkbox');
    if ($(ele).prop('checked')) {
        ele.prop('checked', false);
        $(this).removeClass('active');
    } else {
        ele.prop('checked', true);
        $(this).addClass('active');
    }
});

$(".instagram-details a").click(function () {
    var ele = $(this).closest('a').find(':checkbox');

    if (ele.prop('checked')) {
        ele.prop('checked', false);
        $(this).removeClass('active');
    } else {
        ele.prop('checked', true);
        $(this).addClass('active');
    }
});