简化jquery / javascript的复选框链接

Question

我编写了几行简单的代码，允许在单击时将侧边栏导航中的复选框发送给指定的链接。复选框用作过滤器 这是复选框的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个链接并不是那么糟糕，但500个链接，每个链接都是独一无二的，你就明白了。

是否有解决方案针对每个复选框但允许每个复选框的唯一链接？即定位该类会使所有复选框具有相同的href，因此这不是一个选项，等等。

Answer 1

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

$('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代表该特定复选框的链接。

单线JavaScript：

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

选择器input[data-custom-click]将选中所有自定义行为复选框，$(this)选择已点击的复选框。