JavaScript operation with checkboxes

Question

I have group of check boxes and i need when checkboxes selected or deselected then local variable 'address' containing values of checkboxen but in my format. Sample:

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

If i select Group 1 - vl1 and vl3 Group 2 - vl1 Group 3 - vl1 and vl2 and vl3

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

How to make such a miracle in Java script?

And this source of 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

To get these strings on the clientside, do this:

[...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

To resolve this issue you need to get param, then check needed value dependance of your param, check this example:

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

When you have like this issue you need to subtract issue to subs and then create code for each sub, this will help you to resolve issue like this in future.