javascript - Bootstrap 表单组复选框不会在导航丸之间被选中

Question

这是我工作的 JSFiddle:https://jsfiddle.net/pb23Ljd8/5/

我使用 Bootstrap nav-pills 来显示所有产品，并像这样分类:

我的复选框基于这里:http://bootsnipp.com/snippets/featured/fancy-bootstrap-checkboxes

我计算在标签之间 checkin 的产品数量是这样的:

jQuery(document).ready(function($) {

  jQuery(".select-product").change(function() {

    jQuery(".counter").text(jQuery("[type='checkbox']:checked").length);

  });

});

但是由于某种原因，第二个和第三个选项卡上没有出现 glyphicon 检查图标。但是，当我在第二个和第三个选项卡上单击产品时，它会增加计数器，而且当我在第一个选项卡上查看它时，它也会被选中。

我只需要在第二个和第三个选项卡上对产品进行明显检查，而不仅仅是在第一个选项卡上进行检查，这样用户就不会感到困惑。

想法，有人吗？

编辑:我从 CMS 获取产品列表，因此它是动态的。我现在明白是 ID 重复导致了问题。

Answer 1

在我们尝试解决这个问题之前，我们应该将其分解并查看实际问题是什么。

首先，让我们检查如果我们从选项卡1b 中删除内容，问题是否仍然存在？/p>

不，如果我们从第一个选项卡中删除复选框，则复选框在第二个和第三个选项卡上正常工作。

Fiddle #1

---

如果我们更改复选框的 id 会怎么样(记住 ids should be unique )。

如果我们将第一个复选框的 id 更改为 1a，请注意 Book #1 现在是如何工作的。

Fiddle #2

---

所以现在我们“知道”这个问题很可能是因为我们使用了具有相同 id 值 (ref) 的复选框。 “问题”是现在:

如果选中一个复选框，我们如何选中多个复选框

(或类似的东西)

这是我会做的:

• 为所有 “like” 复选框分配相同的 class (例如，Book #1 checkboxes will have class b1 )
• 使用 jQuery/javascript 确保所有“喜欢”复选框，选中和取消选中一致

Working Example

---

编辑

类的动态值可以通过将 ID 作为类来实现，这样相似的产品就会匹配。这些可以像这样传递给 JS，假设 $products_id_array 是一个包含所有需要的类的 PHP 数组。

var productIDs = <?php echo json_encode($products_id_array) ?>;

然后像这样在 fiddle 上创建 jQuery 代码片段

productIDs.forEach(function(val, key) {
    jQuery('.' + val).on('change', function(){
        jQuery('.' + val).prop('checked',this.checked);
    });
})