简化复选框链接的 jquery / javascript

Question

我写了几行简单的代码，当点击将用户发送到指定的 link 时，允许侧边栏导航中的复选框。复选框用作过滤器。
这是复选框的 HTML：

<li class="inactive" aria-selected="false">
<input id="path1" type="checkbox" value="Accessories">
<a href="href">Accessories</a>
</li>

以及创建交互的 jquery / javascript：

    $('#path1').click(function(){ 
                 window.location='href'; //href would be a unique link
   });

问题不是让这个交互起作用，我遇到了逻辑问题。它的编写方式是针对复选框的 id。它不可扩展。 8 个 link 还不错，但是 500 个 link，每个都是独一无二的，你明白了。

是否有针对每个复选框但允许每个复选框具有唯一 link 的解决方案？ IE。以 class 为目标会使所有复选框都具有相同的 href，因此这不是一个选项，等等。

Answer 1

假设您的 href 值来自您可以使用的输入后面的 link：

$('li.inactive input[type="checkbox"]').click(function(){ 
    window.location = $(this).next('a').attr('href')
});

Answer 2

您可以执行以下操作：

<input type="checkbox" data-custom-click="href">

以上代码可以根据需要重复多次，并使您可以拥有任意数量的复选框。

请注意，上面 HTML 中的 href 代表您针对该特定复选框的 link。

和一个班轮 JavaScript:

$("input[data-custom-click]").click(function (){
    window.location=$(this).attr("data-custom-click");
});

select 或 input[data-custom-click] 将 select 您所有的自定义行为复选框和 $(this) select 单击的复选框。

Simplifying jquery / javascript for checkbox links