Javascript 使用单击和取消单击按钮更新参数

我的网页上有4个按钮，每个按钮都有一个值。因此，根据网页中按下/单击的按钮，我需要相应地修改url中的参数“Buttonvals”，因为这些值将用作SQL查询的过滤器

例如，如果选择了按钮1、2和4

url必须为：url？buttonvals=value1 | value2 | value4。 请建议我如何着手做这件事。如果可能，请提供代码，因为我对Javascript和php还是新手

  <input type="checkbox" name="item1" value="value1"> value1 <br>
  <input type="checkbox" name="item2" value="value2">  value2 <br>
  <input type="checkbox" name="item3" value="value3">  value3 <br>
  <input type="checkbox" name="item4" value="value4">  value4 <br>

  <input type="submit" value="Submit">




  the url must become something like   url?buttonvals=value1|value2|value4

value1

值2

值3

值4

url必须类似于url？buttonvals=value1 | value2 | value4

---

提前感谢：）

您好，我有一个解决方案给您

你的HTML代码

<input type="checkbox" name="item1" value="value1" onclick="setUrlParams(this)"> value1 <br>
<input type="checkbox" name="item2" value="value2" onclick="setUrlParams(this)">  value2 <br>
<input type="checkbox" name="item3" value="value3" onclick="setUrlParams(this)">  value3 <br>
<input type="checkbox" name="item4" value="value4" onclick="setUrlParams(this)">  value4 <br>
<input type="submit" value="Submit">

value1

值2

值3

值4

JS代码

   function setUrlParams($obj){

  var myButtonClasses = $obj.classList;

 if (myButtonClasses.contains("chbox-clicked")) {

    myButtonClasses.remove("chbox-clicked");

 }else{
   myButtonClasses.add("chbox-clicked");
 }


  //now get all selcted classes
  var valueStr = "";
var chboxCheckd  = document.getElementsByClassName('chbox-clicked');
for (var i = 0; i < chboxCheckd.length; ++i) {
    var item = chboxCheckd[i];  
    valueStr = valueStr+item.value+"|";
}
  var finalurl = window.location.href;
  if( finalurl.indexOf('?') >= 0){
    finalurl = finalurl+"&buttonvals="+valueStr.slice(0, -1);
   }else{
    finalurl = finalurl+"?buttonvals="+valueStr.slice(0, -1); 
   }
  //var finalurl = "http://abc.xyz/buttonvals="+valueStr.slice(0, -1);
  console.log(finalurl);
  //window.history.replaceState(null, null, finalurl);
  //window.location.href = finalurl
}

函数seturlparms（$obj）{
var myButtonClasses=$obj.classList；
如果（myButtonClasses.contains（“点击chbox”））{
myButtonClasses.remove（“点击chbox”）；
}否则{
myButtonClasses.add（“点击chbox”）；
}
//现在获取所有选择的类
var valueStr=“”；
var chboxCheckd=document.getElementsByClassName（'chbox-clicked'）；
对于（变量i=0；i=0）{
finalurl=finalurl+“&buttonvals=“+valueStr.slice（0，-1）；
}否则{
finalurl=finalurl+“？buttonvals=“+valueStr.slice（0，-1）；
}
//var finalurl=”http://abc.xyz/buttonvals=“+valueStr.slice（0，-1）；
控制台日志（finalurl）；
//window.history.replaceState（null，null，finalurl）；
//window.location.href=finalurl
}

取消注释replacestate行以更改位置，而无需重新加载页面。或取消注释最后一行，以使用url重新加载页面

目前它只在控制台上打印。这里不允许在JS编辑器上也这样

---

共享您的HTML也请提供一些示例HTML，我们可以使用这些示例帮助您（更简单、更快）听起来您实际上想要的是复选框，而不是按钮。正如@Jeff告诉我的，我将使用隐藏的复选框并通过按钮触发值。我添加了HTML:）是的，复选框就是我想要的嗨，这工作得很好：）但是如果url中有其他参数，这将删除这些参数。我该如何修复这些参数？：）我还编辑了代码和jsbin。现在检查一下@RPNope。它的打印检查在js箱上@如果要保留值，请将选中复选框值存储在某个位置，然后执行相反操作以显示选中@反相