[英]Bootstrap form group checkboxes doesn't get checked in between nav pills
Here's the JSFiddle of my work: https://jsfiddle.net/pb23Ljd8/5/ 这是我工作的JSFiddle: https ://jsfiddle.net/pb23Ljd8/5/
I use Bootstrap nav-pills to show all products and categorized too like this: 我使用Bootstrap nav-pills显示所有产品,并进行如下分类:
And I based my checkboxes from here: http://bootsnipp.com/snippets/featured/fancy-bootstrap-checkboxes 我从这里基于复选框: http : //bootsnipp.com/snippets/featured/fancy-bootstrap-checkboxes
I count the number of products checked in between the tabs like this: 我会像这样计算两个标签之间签入的产品数量:
jQuery(document).ready(function($) {
jQuery(".select-product").change(function() {
jQuery(".counter").text(jQuery("[type='checkbox']:checked").length);
});
});
But the glyphicon check icons doesn't appear on the second and third tabs for some reason. 但是出于某种原因,glyphicon检查图标没有出现在第二个和第三个选项卡上。 But when I click the products on the second and third, it increases the counter and also when I view it on the first tab, it is checked.
但是,当我单击第二个和第三个产品时,它会增加计数器,并且当我在第一个选项卡上查看它时,它也会被选中。
I just need the products to also be visibly checked on the second and third tabs and not only on the first one so it's not confusing for the user. 我只需要在第二个和第三个选项卡上(而不是仅在第一个选项卡上)对产品进行可见检查,以免对用户造成困扰。
Ideas, anyone? 想法,有人吗?
Edit: I fetch the list of products from CMS so it's dynamic. 编辑:我从CMS获取产品列表,因此它是动态的。 I now understand that the duplication of IDs is causing the problem.
我现在知道,重复的ID引起了问题。
Before we try and resolve this issues, we should break it down and see what the actual problem is. 在尝试解决此问题之前,我们应该先进行分解,然后看看真正的问题是什么。
First , let's check if we remove the content
from tab 1b
is the issue still present? 首先 ,让我们检查是否从选项卡
1b
删除了content
,问题仍然存在吗?
Nope, if we remove the checkboxes from the first tab, the checkboxes function normally on the second and third. 是的,如果我们从第一个选项卡中删除复选框,则该复选框在第二个和第三个上正常运行。
What if we change the id
of the checkboxes (remember ids should be unique ). 如果我们改变
id
的复选框(记住ID应该是唯一的 )。
Notice how Book #1
now works if we change the first checkbox's id
to 1a
. 请注意,如果我们将第一个复选框的
id
更改为1a
那么Book #1
现在将如何工作。
So now we "know" the issue is likely due to the fact that we are using checkboxes with the same id
value ( ref ). 因此,现在我们“知道”该问题很可能是由于我们正在使用具有相同
id
值( ref )的复选框。 The "issue" is now : 该“问题”, 现在是:
(or something like that) (或类似的东西)
Here's what I would do: 这就是我要做的:
class
(ex. Book #1
checkboxes will have class b1
) class
(例如, Book #1
复选框将具有类b1
) EDIT 编辑
Dynamic values for the classes can be achieved by putting the IDs as classes so the similar products would match. 可以通过将ID放在类别中来获得类别的动态值,以使相似的产品匹配。 These can be passed to JS like this assuming that
$products_id_array
is a PHP array that contains all the classes needed. 可以假设
$products_id_array
是一个包含所有所需类的PHP数组,将其像这样传递给JS。
var productIDs = <?php echo json_encode($products_id_array) ?>;
and then creating the snippet of jQuery code on the fiddle like this 然后像这样在小提琴上创建jQuery代码段
productIDs.forEach(function(val, key) {
jQuery('.' + val).on('change', function(){
jQuery('.' + val).prop('checked',this.checked);
});
})
Try this JS, This will work 试试这个 JS,这将工作
jQuery(".select-product").change(function() {
var checkValue = jQuery(this).prop('checked');
$('.select-product#' + jQuery(this)[0].id).each(function() {
if (checkValue == true) {
jQuery(this).prop('checked', true)
} else {
jQuery(this).prop('checked', false);
}
});
var uniqueId = [];
jQuery("[type='checkbox']:checked").each(function() {
uniqueId.push(jQuery(this)[0].id);
});
Array.prototype.getUnique = function() {
var u = {},
a = [];
for (var i = 0, l = this.length; i < l; ++i) {
if (u.hasOwnProperty(this[i])) {
continue;
}
a.push(this[i]);
u[this[i]] = 1;
}
return a;
}
jQuery(".counter").text(uniqueId.getUnique().length);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.