0

So, I couldn't get a simple title, sorry for that.

Basically, I want to send a message to X users.
For this I need to select the users that I want to send this message to, and their type, if they are normal, CC or CCI.
Every single type of option has a single name, meaning that in the end I get a list of normal recipients, of CC recipients and CCI recipients. All of this using check-boxes, needing me to create a javascript event to recreate a radio-type of behavior for the options of a single user. I was wondering if there was a better option than this, by using radios?

Here is how it's looking:
Screenshot of current appearance

CCI aren't implanted yet since I started to ask myself this question when I was asked to make them... Here is the code for one user, with the onclick event being the function that recreate radio behavior...

<label class="dropdown-item text-wrap labelname" style="overflow-wrap: break-word; padding-left: 5px; padding-right: 0px;">
    <input class="green form-check-input me-1  checkboxes-recipients recipientsmessage  " id="green2"  onclick="syncUnCheck(green2, gray2)"  type="checkbox" value="invite" name="recipients[]">
    <input class="gray form-check-input me-1  checkboxes-recipients recipientsmessage" id="gray2" onclick="syncUnCheck(gray2, green2)" type="checkbox" value="invite" name="recipientsCC[]">
    invité
</label>

The problem of this function is that It doesn't handle an indefinite amount of check boxes, but only 2 currently, and 3 in the future If I find no other options...perhaps an array argument instead?
here is the code of the function:

<script>
    function syncUnCheck(id, idAlt1) {
      $(id).on("change", function() {
        var ischecked= this.checked
        if (ischecked) {
            $(idAlt1).prop("checked", !this.checked).trigger('change');
        }
        {% if '/messagerie/send' in request.path %}
        showCheckedMessage();
        {% endif %}
      });
    };
</script>

The questions are thus:
Is there an easy html way to do what I want?
A Django trick allowing me to easly use radios with different names for each users?
Or should I just change the js function to handle an undetermined number of checkboxes instead?

Ekmah
  • 59
  • 1
  • 7
  • I would not recommend that you bind your change function inside click function. – Carsten Løvbo Andersen Jan 31 '22 at 10:25
  • @CarstenLøvboAndersen Ok, but why? – Ekmah Jan 31 '22 at 10:28
  • 2
    Because you will add a new event listener every time you click. That means that the callback function of your `change` event will run for the amount of times you clicked the checkbox. The proper way is to add a single event listener (preferibly not inline like `onclick`, keep JS and HTML separate) and have the callback function handle all situations. For your question, look into [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) – Emiel Zuurbier Jan 31 '22 at 10:29
  • @EmielZuurbier I see, I did not know that, thank you. Just this made it worth it to ask this question :D – Ekmah Jan 31 '22 at 10:31

0 Answers0