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>

Answer 2

要解决此问题，您需要获取参数，然后检查所需的参数依赖值，请检查以下示例：

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = "param=1&cb[gr1]=vl1-vl3&cb[gr2]=vl1&cb[gr3]=vl1-vl2-vl3",//window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

var paramNum = getUrlParameter('param');
var paramGr  = getUrlParameter('cb[gr' + paramNum + ']');
var paramGrSplit = paramGr.split('-');

var valueString = '';
for(var i = 0; i < paramGrSplit.length; i++){
    $("input[value=" + paramGrSplit[i] + "]").prop('checked', true);
}

Live Demo

当您遇到此问题时，需要将问题减去多个子项，然后为每个子项创建代码，这将帮助您将来解决此类问题。

带复选框的JavaScript操作

2 个答案: