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/

I hope you are aware that POST request actually sends data in body, not in query parameters. If yes and you know what you're doing, so you have to handle data sending process yourself: intercept form' submit, construct body and query, send data. In the second step (construct query) take all the selected checkboxes arranged in one fieldset and join their values, that's it. — lucifer63
– lucifer63, Commented Dec 7, 2018 at 13:00
No no, POST not needed. I want set local JS string variable with parameters in my string format — Andrey Koftun
– Andrey Koftun, Commented Dec 7, 2018 at 13:03

connexo · Accepted Answer · 2018-12-07 13:26:01Z

2

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>

answered Dec 7, 2018 at 13:26

connexo

57.3k15 gold badges112 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrey Koftun Over a year ago

Wow. This super ES6 solution, but not work in old browsers :(

connexo Over a year ago

Easy to adjust to ES5. You want ES5?

Andrey Koftun Over a year ago

Connexo please help, why "undefined" value in my object? pls see jsfiddle.net/3vqr1ksy/5

Anees Hikmat Abu Hmiad · Accepted Answer · 2018-12-07 13:14:04Z

1

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.

answered Dec 7, 2018 at 13:14

Anees Hikmat Abu Hmiad

3,5602 gold badges23 silver badges39 bronze badges

1 Comment

Andrey Koftun Over a year ago

No. No GET, no POST, no address location. I need change in realtime (onClick) local string variable sample: If i checked gr1 - vl1 then $my_var = "cb[gr1]=vl1". If uncheked then $my_var=""

Collectives™ on Stack Overflow

JavaScript operation with checkboxes

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related