Checkboxes values

Question

I'm trying to get the values of the checkboxes I check and put them in a php variable, but when I output that value, it gives me zeroes (0). If I check 3 boxes, I get three zeroes, etc. Info: I want every checkbox that is checked, so if cb1 and cb3 are checked, I want the variable to be "cb1cb3"

HTML code:

<div class="form-label-group">
  <h2 for="checkboxes">
    Some text
  </h2>
  <input type="checkbox" id="cb1" onclick="click()" name="cb[]" value="cb1"><label for="cb1">cb1</label><br>
  <input type="checkbox" id="cb2" onclick="click()"  name="cb[]" value="cb2"><label for="cb2">cb2</label><br>
  <input type="checkbox" id="cb3" onclick="click()"  name="cb[]" value="cb3"><label for="cb3">cb3</label><br>
</div>

JS/php code:

function click(){
    
    $("input[name='cb[]']:checked").each(function ()
    {   
        cb+=$(this).text();
        //also tried to put a $ sign in front of the cb variable: $cb+=$(this).text();
        //and with val instead of text: $cb+=$(this).val();
        i++;
    });
}

Hope you can help out

PeterKA · Accepted Answer · 2020-09-02 18:25:46Z

Always good practice to keep your JS and HTML separate by not using inline JS. Also I would use the change event and .map() method as follows:

$('input[name="cb[]"]').on('change', function() {
    const checkedVals = $('input[name="cb[]"]:checked').map((i,c) => c.value).get();
    console.log( checkedVals ); //array
    console.log( checkedVals.join('') ); //strings: values concatenated
});

DEMO

$(function() {
    $('input[name="cb[]"]').on('change', function() {
        const checkedVals = $('input[name="cb[]"]:checked').map((i,c) => c.value).get();
        console.log( checkedVals );
        console.log( checkedVals.join('') );
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-label-group">
  <h2 for="checkboxes">
    Some text
  </h2>
  <input type="checkbox" id="cb1" name="cb[]" value="cb1"><label for="cb1">cb1</label><br>
  <input type="checkbox" id="cb2" name="cb[]" value="cb2"><label for="cb2">cb2</label><br>
  <input type="checkbox" id="cb3" name="cb[]" value="cb3"><label for="cb3">cb3</label><br>
</div>

d.grislain · Accepted Answer · 2020-09-02 17:41:02Z

Try this

<div class="form-label-group">
  <h2 for="checkboxes">
    Some text
  </h2>
  <input type="checkbox" id="cb1" name="cb[]" value="cb1"><label for="cb1">cb1</label><br>
  <input type="checkbox" id="cb2" name="cb[]" value="cb2"><label for="cb2">cb2</label><br>
  <input type="checkbox" id="cb3" name="cb[]" value="cb3"><label for="cb3">cb3</label><br>
</div>
<script>
    $("input[name='cb[]']").on("click", (e) =>{
        let cb="";
        $("input[name='cb[]']:checked").each(function ()
        {   
            cb+=$(this).val();
        //     i++;
        });
        console.log(cb);
    });
</script>

I replace your checkbox html ...onclick="click()"... by

$("input[name='cb[]']").on("click", (e) =>

then in js then i added let cb = "" for reset value on new click event

cb+=$(this).text() change to cb+=$(this).val(); cause $(this).text() returned nothing on console.log

I replace ...onclick="click()"... by $("input[name='cb[]']").on("click", (e) => in js then i added ` let cb = ""` for reset value on click event and for finish cb+=$(this).text() change to cb+=$(this).val(); cause $(this).text() returned nothing on console.log

Collectives™ on Stack Overflow

Checkboxes values

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related