onclick window.location.href 输入多个值

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 的值（可能是单击按钮时）。