带有复选框的 JavaScript 操作

Question

我有一组复选框，当选中或取消选择复选框时，我需要包含复选框值的局部变量“地址”，但采用我的格式。示例:

http://localhost/?param=1&cb[gr1]=vl1-vl3&cb[gr2]=vl1&cb[gr3]=vl1-vl2-vl3

如果我选择第 1 组 - vl1 和 vl3第 2 组 - vl1第 3 组 - vl1、vl2 和 vl3

http://localhost/?param=1
&cb[gr1]=vl1-vl3
&cb[gr2]=vl1
&cb[gr3]=vl1-vl2-vl3

如何用Java脚本创造这样的奇迹？

还有这个 html 来源

<form action="form.php" method="post">
    <fieldset>
        <legend>Group 1</legend>
        <input type="checkbox" name="gr1[]" value="vl1"/>value 1<br/>
        <input type="checkbox" name="gr1[]" value="vl2"/>value 2<br/>
        <input type="checkbox" name="gr1[]" value="vl3"/>value 3<br/>
    </fieldset>

    <fieldset>
        <legend>Group 2</legend>
        <input type="checkbox" name="gr2[]" value="vl1"/>value 1<br/>
        <input type="checkbox" name="gr2[]" value="vl2"/>value 2<br/>
    </fieldset>

    <fieldset>
        <legend>Group 3</legend>
        <input type="checkbox" name="gr3[]" value="vl1"/>value 1<br/>
        <input type="checkbox" name="gr3[]" value="vl2"/>value 2<br/>
        <input type="checkbox" name="gr3[]" value="vl3"/>value 3<br/>
    </fieldset>
</form>

https://jsfiddle.net/3vqr1ksy/

Answer 1

要在客户端获取这些字符串，请执行以下操作:

[...document.querySelectorAll('fieldset')].forEach(function(fs) {
  fs.addEventListener('change', function(event) {
    let checkedValues = [...this.querySelectorAll(':checked')].map(cb => cb.value).join('-')
    window[this.dataset.group].textContent = checkedValues
  })
})

fieldset {
  float: left;
  width: 27%;
}

<form action="form.php" method="post">
  <fieldset data-group="g1">
    <legend>Group 1</legend>
    <label><input type="checkbox" name="gr1[]" value="vl1" />value 1</label><br/>
    <label><input type="checkbox" name="gr1[]" value="vl2" />value 2</label><br/>
    <label><input type="checkbox" name="gr1[]" value="vl3" />value 3</label><br/>
  </fieldset>

  <fieldset data-group="g2">
    <legend>Group 2</legend>
    <label><input type="checkbox" name="gr2[]" value="vl1" />value 1</label><br/>
    <label><input type="checkbox" name="gr2[]" value="vl2" />value 2</label><br/>
  </fieldset>

  <fieldset data-group="g3">
    <legend>Group 3</legend>
    <label><input type="checkbox" name="gr3[]" value="vl1" />value 1</label><br/>
    <label><input type="checkbox" name="gr3[]" value="vl2" />value 2</label><br/>
    <label><input type="checkbox" name="gr3[]" value="vl3" />value 3</label><br/>
  </fieldset>
</form>
<div>Group 1: <span id="g1"></span></div>
<div>Group 2: <span id="g2"></span></div>
<div>Group 3: <span id="g3"></span></div>