Django How to get value of CheckboxSelectMultiple in Javascript in Template

Question

I have a CheckboxSelectMultiple in a Django form like this :

forms.py

LIST= [
  ('Oranges', 'Oranges'),
  ('Cantaloupes', 'Cantaloupes')
]

testrever = forms.MultipleChoiceField(required=False,widget=forms.widgets.CheckboxSelectMultiple(choices=LIST)`)

I would like to get the Checkboxes value, each time that one of them is there is selected / unselected to populate another field of the form (email).

This is what I got so far but I can't retrieve the chekboxes value :

template.py

<script>
  $(function(){
    $('#id_testrever').change(function(){
      var a = $("#id_email").val();
      
      if ($("#id_testrever").val() == "Oranges")
        $("input[name=email]").val(a + "Oranges")
        
      if ($("#id_testrever").val() == "Mangoes")
        $("input[name=email]").val(a + " Mangoes")
    });
  });
</script>

Ankit Tiwari · Accepted Answer · 2023-05-19T19:59:21.740

2

If you're using MultipleChoiceField then your each checkbox will have an ID with a suffix, which contains the index of each checkbox. So to get the values of selected checkboxes, you've got to get all selected checkboxes and you can access ids like this:

$('#id_testrever_0').val() // value of first checkbox
$('#id_testrever_1').val() // value of second checkbox

Or if you want to select all the checkboxes and get values of those intead of selecting one at a time you can do like this

let selectedValues = [];
$("input:checkbox[name=testrever]").on("change", function() {
  $("input:checkbox[name=testrever]:checked").each(function(){
    selectedValues.push($(this).val());
  });
  console.log(selectedValues);
});

In above code you can access values in selectedValues array.

Your final code will look like this

$("input:checkbox[name=testrever]").on("change", function() {

  var a = $("#id_email").val();

  $("input:checkbox[name=testrever]:checked").each(function(){

    let testrever = $(this).val();

    if (testrever == "Oranges")
      $("input[name=email]").val(a + "Oranges")

    if (testrever == "Mangoes")
      $("input[name=email]").val(a + " Mangoes")

  });
});

edited May 19 '23 at 19:59

answered May 19 '23 at 19:31

Ankit Tiwari

4,438
4
14
41

Is there a way to return only the last selected chekbox result using the second solution ? I want to return the value only when it's checked, and not whane ot's unchecked – Nico44044 May 19 '23 at 19:47
Yes, if you can see my answer in that I've added event listener which will get called when you check or uncheck your checkbox so inside that you can I add conditions which you've specified in your question I'll update my answer according to it. – Ankit Tiwari May 19 '23 at 19:50
In your question what does this line `var a = $("#id_email").val();` do I think you want to get checked value on this line am I right? – Ankit Tiwari May 19 '23 at 19:52
The purpose of this function is to add the content of a checkbox value to the email field content. So first i save the email field content as it is and add the checked box content at the end. So far your code works but the problem is that it copies every checkboxes checked values each time. Instead I want only the lastest checkbox value to be add, not all of them checked. – Nico44044 May 19 '23 at 19:56
Thanks again @Ankit Tiwari almost perfect BUT the checkboxes values are defined dynamically depending of a User ID so their values are not fix and can change for each different user. Is there a way to do the same but without refering the value (like Oranges or Mangoes) ? Maybe with the checkbox ID instead – Nico44044 May 19 '23 at 20:11

score 2 · Answer 2 · answered May 19 '23 at 19:52

2

You can make a selector that selects the checkboxes under the type, so:

$('#id_testrever input:checkbox')

this will return all checkboxes. You can obtain all checked ones with:

$('#id_testrever input:checkbox:checked')

so you can for example obtain a list of the values of the checked checkboxes with:

$('#id_testrever input:checkbox:checked').map(function() {
    return this.value;
});

answered May 19 '23 at 19:52

Willem Van Onsem

443,496
30
428
555

Thanks Willem, as I wrote in comment of Ankit solution, I would like to return ONLY the latest checked checkbox value. So far it returns all the checked checkbox values everytime. I want only the last one – Nico44044 May 19 '23 at 20:02
@Nico44044: last one in what sense, time, or order of options? – Willem Van Onsem May 19 '23 at 20:04
I mean time. I just don't want the entire checked values of every checked boxes everytime. Only the value of the last one checked and ignore the value of the ones already checked before. – Nico44044 May 19 '23 at 20:06
1

@Nico4404: typically you subscribe with `$('#id_testrever input:checkbox').on('change', function () {...});` in the function (the `...` part), the `this` then refers to the checkbox that was clicked so in the function you can then handle that event. – Willem Van Onsem May 19 '23 at 20:09
Yes but so far it also trig the function on Unclick. I would like it to launch only when the checkbox is selected and NOT when it's unselected – Nico44044 May 19 '23 at 20:25
1

you can use an `if(this.checked) {..}` to only do the `..` in case the item is now checked. – Willem Van Onsem May 19 '23 at 20:44

Django How to get value of CheckboxSelectMultiple in Javascript in Template

2 Answers2

Linked