Работа JavaScript с флажками

Question

У меня есть группа флажков, и мне нужно, когда флажки установлены или сняты, тогда локальная переменная 'address', содержащая значения checkboxen, но в моем формате.Пример:

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

Когдау вас есть эта проблема, вам нужно вычесть проблему для подпрограмм, а затем создать код для каждой подпрограммы, это поможет вам решить эту проблему в будущем.