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?

user_10178278 · Answer

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 :)

user_4690946 · Answer

Ciao Martina, tutto bene?

I have to admit I don't know the plugin you're using, but reading your question it seems it is a works as intended or side effect of the plugin itself.

To be sure about that you can try to see if an onUncheckAll event is fired when you uncheck BERMUDA and/or to repeat the same test with a search having two results and checking what happens when you select/unselect all the results.

If that is the case I simply suggest you to write your handles keeping in mind this behavior of the plugin.

Hope this helps.

multiple select js when click on single element raise also checkall

2 Answers