Jquery 如何在复选框单击时向两个元素添加类并防止重复url字符串？

背景

我有两个选项卡式容器（网格和列表视图），其中包含多个元素（信息框），其中包含复选框输入，当选中其中一个复选框时，信息框的背景颜色会改变。该代码还将信息框的id添加到url，说明选择了哪些信息框

示例

$('.all input[type="checkbox"]').change(function() {
    // If checked
    if (this.checked) $(":checkbox[name=" + this.name + "]").attr('checked', 'checked');
    else $(":checkbox[name=" + this.name + "]").attr('checked', false); // find other checkboxes with same value and uncheck them
})

因此，id号为01 on的url如下所示：

www.example.com01=on

问题：

网格视图和列表视图以不同的方式显示相同的数据。因此，如果在网格视图中选择1，在列表视图中选择1，则地址如下所示：

www.example.com01=on&01=on

问题：

我如何修复它，以便如果选中复选框，它会更改网格视图和列表视图中信息框的背景颜色，如果选择了相同的id，它不会重复url中的数字，如上面的问题示例所示

示例html结构：

<div class="all">

<div class='vac_holder'>
<div class='child_vac'>
<input type="checkbox" class="faChkRnd like" name="<?php echo $row['vac_id']; ?>">
</div>
</div>

</div>

JS：选中同名的所有复选框

$('.all input[type="checkbox"]').change(function() {
    // If checked
    if (this.checked) $(":checkbox[name=" + this.name + "]").attr('checked', 'checked');
    else $(":checkbox[name=" + this.name + "]").attr('checked', false); // find other checkboxes with same value and uncheck them
})

如果我的解释令人困惑，我们将非常感谢您的帮助。

链接和序列化 关于您的问题，请链接

网格

和

列表

中的复选框

假设您有这样的

复选框

<input type="checkbox" class="faChkRnd like" name="data1">
<input type="checkbox" class="faChkRnd like" name="data2">
<input type="checkbox" class="faChkRnd like" name="data...">

链接和序列化
关于您的问题，请链接
网格
和
列表
中的复选框

假设您有这样的
复选框

<input type="checkbox" class="faChkRnd like" name="data1">
<input type="checkbox" class="faChkRnd like" name="data2">
<input type="checkbox" class="faChkRnd like" name="data...">

Fiddle已经更新了如何使用变量跟踪复选框并创建一个函数来使用onchange事件更新复选框的显示？@DavidNguyen这就是我所做的。但是演示文稿的更改似乎不起作用，并且不断重复url中的id号。如果一个信息框在一个视图中被选中，那么它在另一个视图中就不会被选中。我不太明白为什么在这里使用pushstate。而你的$。每个都只运行一次，在刷新后才会更新另一个选项卡中的复选框。提琴已经更新。使用变量跟踪复选框，并创建一个函数，用onchange事件更新复选框的表示方式如何？@davidnguen这正是我所做的。但是演示文稿的更改似乎不起作用，并且不断重复url中的id号。如果一个信息框在一个视图中被选中，那么它在另一个视图中就不会被选中。我不太明白为什么在这里使用pushstate。和你的$。每个只运行一次，在刷新之前不会更新其他选项卡中的复选框。哇！回答得好！非常感谢你！我看到你在使用idData，我可以这样使用吗：idData=”“Oups，只是忘了保存jsfiddle-just更新我答案中的链接。idData不再使用了LOL:）我一直都是这么做的哈哈。“我现在遇到一个错误，”说“checkboxesForSerialiZation未定义”用^ ^ ^ ^ checkboxesForSerialiZation->checkboxesForSerialiZation:”再次更新它（似乎对我来说，自动选择相同的id或序列化都不起作用。哇！回答太好了！非常感谢！我看到你在使用idData，我可以这样使用它吗：idData=“”哎呀，只是忘了保存JSFIDLE-只是更新我答案中的链接。idData不再使用了LOL:）我一直都在这么做哈哈。“我现在遇到一个错误，”说“checkboxesForSerialiZation未定义”再次用^ ^ ^ ^ checkboxesForSerialiZation->checkboxesForSerialiZation:”更新它（在自动选择相同id或序列化方面似乎对我不起作用）。