multiple select js when click on single element raise also checkall

Question

I'm using this multiple checkbox plugin http://multiple-select.wenzhixin.net.cn/docs/en/download

I'm using the filtering option

The problem that I have is that if I have only one option whit Select All like this image

when I click on BERMUDA option, in debug raises both onClick event and onCheckAll event even if I don't click on Select All.

This thing happens only if I only have one entry besides "Select All" entry.

The js code is the following:

$("#" +ddl_ID).multipleSelect({
   filter: true,
   multiple: true,
   "data-multiple-width": 150,
   onClick: function (view) {
      //aggiungo alla lista di selezionati solo il valore selezionato.
      //se esiste già lo elimino

      listaSel = $("#"+txtSel_ID).val();

      var array = listaSel.replace("[", "").replace("]", "").split(",");
      const index = array.indexOf(view.value);
      if (index >= 0) //esiste già, lo elimino
         array.splice(index, 1);
      else //non esiste, lo aggiungo
         array.push(view.value);

      listaSel = "";
      //ricostruisco la stringa
      for (var i = 0; i < array.length; i++) {
         if (array[i] != "")
            listaSel += array[i] + ",";
      }

      if (listaSel.length > 0)
         listaSel = listaSel.substring(0, listaSel.length - 1);


      $("#" +txtSel_ID).val("[" + listaSel + "]");
      console.log($("#" +txtSel_ID).val());
   },
   onCheckAll: function (view) {

      listaSel = $("#" +txtSel_ID).val(); //attualmente nella ricerca

      var listaSelezionata = $("#" +ddl_ID).multipleSelect("getSelects"); //selezionati adesso
      var array = listaSel.replace("[", "").replace("]", "").split(",");

      for (var i = 0; i < listaSelezionata.length; i++) {
         const index = array.indexOf(listaSelezionata[i]);
         if (index == -1) //non esiste, lo aggiungo
            array.push(listaSelezionata[i]);
      }

      listaSel = "";
      //ricostruisco la stringa
      for (var i = 0; i < array.length; i++) {
         if (array[i] != "")
            listaSel += array[i] + ",";
      }

      if (listaSel.length > 0)
         listaSel = listaSel.substring(0, listaSel.length - 1);

      $("#" +txtSel_ID).val("[" + listaSel + "]");
      console.log($("#" +txtSel_ID).val());
   },
   onUncheckAll: function (view) {
      listaSel = $("#" +txtSel_ID).val(); //attualmente nella ricerca
      var listaSelezionata = $("#" +ddl_ID).find('option').not(':selected'); //selezionati adesso

      var array = listaSel.replace("[", "").replace("]", "").split(",");

      for (var i = 0; i < listaSelezionata.length; i++) {
         const index = array.indexOf(listaSelezionata[i].value);
         if (index > -1) // esiste, lo rimuovo
            array.splice(index, 1);
      }

      listaSel = "";
      //ricostruisco la stringa
      for (var i = 0; i < array.length; i++) {
         if (array[i] != "")
            listaSel += array[i] + ",";
      }


      if (listaSel.length > 0)
         listaSel = listaSel.substring(0, listaSel.length - 1);

      $("#" +txtSel_ID).val("[" + listaSel + "]");
      console.log($("#" +txtSel_ID).val());
   }
});

//se la listaSel è vuota richiamo per sicurezza l'uncheckall
if (listaSel == undefined || listaSel == "" || listaSel == "[]") {
   console.log("lista null");
   $("#" +ddl_ID).multipleSelect("uncheckAll");
}
//se no imposto i valori selezionati 
else {
   $("#" +ddl_ID).multipleSelect("setSelects", JSON.parse(listaSel));
 }
}

Can someone help me?

Answer 1

Feels like its the plugin's default behavior but we can tackle it by simply looking at your question as the answer resides there. You mentioned that this issue occurs when only one item left in the multi-select box right? well, that's our cue.

So all you need to do is to place a condition to handle this issue when the length is only equal to one. Judging by your code, I believe we can get the total length by this line of code:

var listaSelezionata = $("#" +ddl_ID).multipleSelect("getSelects"); //selezionati adesso

And we will simply go into onCheckAll event and add a condition that if items are greater than 1 then only perform certain action in oncheckAll event else nothing will happen.

onCheckAll: function (view) {
    var listaSelezionata = $("#" +ddl_ID).multipleSelect("getSelects"); //selezionati
    if(listaSelezionata.length > 1){
      //Do somthing
    }
}

Hope it helps :)