Question

我有几个复选框（来自博客标签）。我使用以下代码加载所选的任何标签，但这仅在一个标签中起作用。

我已经尝试过，但是它仅适用于一个检查标签，并且复选框输入消失，仅加载页面

/search/?q=label:Topic1

我的代码

    <ul>
    <li> <input class="topik" type="checkbox" value="label:topik1"></li>
    <li> <input class="topik" type="checkbox" value="label:topik2"></li>
    <li> <input class="topik" type="checkbox" value="label:topik3"></li>
    <li> <input class="topik" type="checkbox" value="label:topik4"></li>
    <li> <input class="topik" type="checkbox" value="label:topik5"></li>
    </ul>

     jQuery(document).ready(function($) {
     $(".topik").change(function() { 
     window.location.href = '/search/?q=' + this.value;
     });
     });

现在的问题是，我希望能够运行多个标签供您选择。如何在代码中做到这一点？现在的问题是，我希望能够运行多个标签供您选择。如何在代码中完成？以下列格式加载页面

/search/?q=label:Topic1|label:Topic2|label:Topic3

谢谢您的帮助！

Answer 1

您的代码存在的问题是，它会在更改输入时进行重定向。

$(".topik").change(function() { 
     window.location.href = '/search/?q=' + this.value;
     });

当您单击一个输入复选框时，它将取其值并转到带有标签名称的位置。选择后，我的代码会将所有值附加到字符串，然后单击按钮即可进行重定向。

 <ul>
        <li> <input class="topik" type="checkbox" value="label:topik1"></li>
        <li> <input class="topik" type="checkbox" value="label:topik2"></li>
        <li> <input class="topik" type="checkbox" value="label:topik3"></li>
        <li> <input class="topik" type="checkbox" value="label:topik4"></li>
        <li> <input class="topik" type="checkbox" value="label:topik5"></li>
        </ul>
        <button id="a">click</button>


    var t='/search/?q=';
var k;
var count=0;
jQuery(document).ready(function($) {
     $(".topik").change(function() { 
     count++;
     if(count==1)
     t = t + this.value;
     else
     t = t +"|"+ this.value;

     alert(t);
     });
     $("#a").click(()=>{
     window.location.href=t;
     })
     });

Answer 2

如果要实现这一点，则不必在事件函数中设置window.location.href。

您可以将复选框的状态存储在数组中，并使用.reduce()生成字符串

label:Topic1|label:Topic2|label:Topic3，

然后您可以确定在哪个事件中设置window.location.href的值（可能是单击按钮时）。

输入多个值的onclick window.location.href

2 个答案: