Vérifier que mes checkbox sont ou non checked

Version imprimable

Bonjour à tous

J'ai ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<form class="form-style" id="st-21">
  <label style="margin-right:10px">
  <input type="checkbox" name="ra">
    Radiation solaire(W/m2)
  </label>
  <label style="margin-right:10px">
    <input type="checkbox" name="ba" checked="checked">
      Batterie(V)
   </label>
   <label style="margin-right:10px">
        <input type="checkbox" name="an">
        Vitesse du vent(km/h)
    </label>
    <label style="margin-right:10px">
        <input type="checkbox" name="wd" style="margin-right:10px" >
        Direction du vent(Degré)
    </label>
</form>

Le but est de vérifier ce qui est checked ou pas, et de faire en sorte qu'il n'y ait jamais plus de deux checkbox checked.
Si je coche une troisième,

il doit décocher un au hazard
sauf celui qui à pour nom "ba"
et sauf celui que je viens de sélectionner

Mais par contre, j'ai un souci pour parcourir mes checkbox. Je procède de la manière suivante

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    $(".form-style").on('change',function() {
        formData = $(this).serializeArray();
 
        if(formData.length > 2){
            console.log("form-style",formData);
            $(this).each(function(){
               if($(this).is(':checked')){
                 // fais quelque chose
               }
           });
        }
 
 
    })

L'idée est de parcourir ma form avec

Code:

1
2
3
4
5
6
7
8
9
 
$(this).each(function(){
            if($(this).is(':checked')){
              // fais quelque chose
            }
 
        });
 
        });

mais la dedans, je ne peux pas refaire un $(this)?

Comment m'orienteriez-vous?
Merci

21/12/2020, 10h18
NoSmoking

Bonjour,
pour la récupération des éléments checked, il existe : :checked Selector.

Bonjour,

D'accord mais ca ne me dit pas comment parcourir tous les éléements enfant à partir de son parent
Code:

1 2 3 4 5 6 7 8 9 10 11 $(".form-style").on('change',function() { //formData = $(this).serializeArray(); $(this).each(function(){ if($(this).is(':checked')){ // fais quelque chose alert("o"); } }); })
Par exemple si dessus, le $(this) fait référence à .form-style (qui est la class de la balise form).
Il ne devrait fair un alert("o") à chaque fois qui voit un checkbox checked?

Ou alors comment, je peux utiliser ceci

Code:

$( "input:checked" ).length;

mais uniquement pour ceux qui se trouve dans le bloque <form>, dans lequel j'ai changé l'état d'un checkbox

Ha, bem je vrois que j'ai toruvé

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
    $(".form-style").on('change',function() {
        formData = $(this).serializeArray();
 
        if(formData.length > 2){
            console.log("form-style",formData);
        }
 
        $(this).find('input:checked').each(function () {
            console.log($(this).attr("name"));    
        });
 
 
    })

Je me prends la terre ma grave et j'apprécierais bien un coup de main.

Je pars sur ce code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 $(".form-style").on('change',function() {
        /*
        formData = $(this).serializeArray();
        if(formData.length > 2){
            console.log("form-style",formData);
        }
        */
         var sList=[];
        $(this).find('input:checkbox').each(function () {
 
            console.log($(this).attr("name") + " - " + $(this).data("sensor")); 
 
            if($(this).is(':checked'))
            {
                console.log("yes");
                //if(sList.indexOf(parseInt($(this).data("family"))) < 0)
                //{
                    sList.push($(this).data("sensor"));
                //} 
            }
            else
            {
                console.log("no");
 
                if(sList.indexOf(parseInt($(this).data("sensor"))) >=0)
                {
                    //console.log(parseInt($(this).data("family")));
                    sList.splice(sList.indexOf($(this).data("sensor")), 1);
                }
 
            }
 
        });
 
        sList = removeDuplicateInArray(sList);
        console.log(sList);
})

et voici mon code HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form class="form-style" id="st-21">
  <label style="margin-right:10px">
    <input type="checkbox" data-type="2" data-sensor="1" data-family="2" name="b1" style="margin-right:10px" checked="checked">
      Température bas(C)
    </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="2" data-sensor="4" data-family="2" name="b4" style="margin-right:10px" checked="checked">
      Température haut(C)
   </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="5" data-sensor="21" data-family="4" name="ba" style="margin-right:10px" checked="checked">
      Batterie(V)
  </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="6" data-sensor="18" data-family="5" name="an" style="margin-right:10px">
      Vitesse du vent(km/h)
  </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="7" data-sensor="19" data-family="5" name="wd" style="margin-right:10px">
      Direction du vent(Degré)
  </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="8" data-sensor="20" data-family="6" name="wd" style="margin-right:10px">
      Radiation solaire (W/m2)
  </label>
</form>

Il faut qu'on puisse pas cocher plus de checkbox qui ne sont pas du même type. Un type se distingue avec l'uité
Dans mon code HTML, on distingue les type avec le tag

Code:

data-type

(Un type papartient à une famile (data-family) )

Température Bas et Température Hau, sont du eme type (car meme unité) et de la même famile
Vitesse du vent et direction du vent, ne sont pas du même type, mais de la même famille

Par exemple, je dois pouvoir cocher

* Température Bas, Température Haut, Batterie (Les température sont du meme type)
* Batterie, Direction du vent
* Vitesse du vent, Direction du vent
* Température Bas, Température Haut, Vitesse du vent

Ainsi de suite.

Si deux checkbox de type différent sont cochés et je veux en cocher un troisième, l'un des deux premier doit se décoché pour autant qu'ils soient d'un type différent

J'ai essyé mille truc, hier toute la soirée, et ej en sais même plus le code que je peux passer.

Voici une tentative que j'ai gardé en commentée.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
console.log("======");
         $(this).find('input:checked').each(function () {
 
                console.log($(this).attr("name") + " - " + $(this).data("type"));    
                //console.log("l: ",sList.length);
                //console.log("i: ",$(this).data("type"));
                //console.log("Array index:", sList.indexOf(parseInt($(this).data("type"))));
 
 
 
// && 
 
 
                if(sList.length > 1){
                    console.log("coucou");
                    if(sList.indexOf(parseInt($(this).data("type"))) < 0)
                    {
                        console.log("nono");
                        //var i = sList.shift();
                        sList.pop();
                        //$(this).data("type",i).prop( "checked", false);
                        //console.log(i);
                    }
 
                }
 
// arr.splice(1, 1);
 
                if(sList.indexOf(parseInt($(this).data("type"))) < 0)
                {
                    sList.push($(this).data("type"));
                }      
 
         });
         */
 
        //sList = removeDuplicateInArray(sList);

Le gros problème que j'avais est que lorsque je cliquait sur Température Bas, l'array sList avait n'avait pas de nouvel index, car dans la prochaine interraction du each(), elle était retiré de sList car Température Haut n'était pas cochée.

Dès lors je suis bloqué. Comment feriez-vous se truc.

Milles mercis

J'avance et ceci me permets de construire mon array sList correctement, mais je ne suis pas convaincu que cela soit fait proprement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
    $(".form-style").on('change',function() {
        var sList=[];
        $(this).find('input:checkbox').each(function () {
 
            console.log("fam:" + $(this).data("family") + "; sensor: " + $(this).data("sensor") + "; type:" + $(this).data("type") + "; name:" +$(this).attr("name")); 
 
            if($(this).is(':checked'))
            {
 
                sList[parseInt($(this).data("sensor"))] = parseInt($(this).data("type"));
 
            }
            else
            {
                sList[parseInt($(this).data("sensor"))] = 0;
            }
 
        });
 
        sList = removeDuplicateInArray(sList); // Si je commente ceci, cela ne marche plus
        console.log("array",sList);
 
        /*
        for (var x in sList) {
            console.log(x + " => " + sList[x]);
        }
        */
 
        $.each( sList, function( key, value ) {
            console.log( key + ": " + value );
        });
 
 
    })
 
function removeDuplicateInArray(data){
    return data.filter((value,index) => data.indexOf(value) === index);
}

Depuis que j'ai modifier ainsi

Code:

sList[parseInt($(this).data("sensor"))]=parseInt($(this).data("type"));

Ca semble fonctionner. Si deux checkbox du même type, il n'ajoute qu'une entrée dans mon array.

Mais ca ne fonctionne plus, si je commente ceci

Code:

sList = removeDuplicateInArray(sList); // Si je commente ceci, cela ne marche plus

L'autre truc que je en comprends, et c'est pourquoi je reviens sur ce post, pour mon for each

Code:

1
2
3
        $.each( sList, function( key, value ) {
            console.log( key + ": " + value );
        });

M'adffiche des key de 0 à 4, mais les key ne corresponde pas à l'id de mon sensor, car j'ai besoin de connaitre l'ID de mon sensor (data-sensor="21"), pour la décocher ensuite

23/12/2020, 16h15
Toufik83

Bonjour,

Tu as 6 checkbox au total ou bien seulement dans l'exemple ?

Bonjour,

Malgré que tu n'as pas répondu à ma question, voilà un bout de code adapté aux 6 cases et fonctionnel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
$(".form-style").on('change', "[type='checkbox']", function() {
  var form = $(this).closest('.form-style'),
    Checked = form.find('[data-type]:checked'),
    dtThis = $(this).attr('data-type');
  if ($(this).is(':checked') && Checked.length > 2) {
    $(
        $.grep(Checked, (el, i) => {
          let dt = $(el).attr('data-type');
          return !$(el).is(this) &&
	    !$(el).is(form.find('[data-type!="' + dtThis + '"]:checked').first().get(0)) &&
            dt != dtThis  &&
            form.find('[data-type="' + dt + '"]:checked').not(el).length < form.find('[data-type="' + dtThis + '"]:checked').length;
        })
      )
      .prop('checked', false);
  }
});

30/12/2020, 14h07
pierrot10

Bonjour Toufik83
Toutes mes excuses. J'avais trouvé une solution provisoire et je suis parti sur un autre problème.
Donc désolé de ne pas avoir répondu à ton message (je ne l'avais aussi pas vu).

Oui j'ai plusieurs checkbox, mais par station.
https://bud.eco-sensors.ch/charts.php?field=2

Actuellement, j'en ai quatre pour une station et deux pour les autres.
Ce besoin est quand il y a plus de deux types (un type par ceckbox) car le graph ne peut afficher que deux types (un a gauche et l'autre à droite)

Je vais essayer ton code car ma solution est bonne pour le moment, mais elle n'est pas optimale. mais je ne pourrai pas le faire tout de suite,
31/12/2020, 21h10
Toufik83

Bonjour,

Oui mais je vois qu'il n'y a pas de data-family attribué aux éléments, puis quand tu as dis :

Citation:

Envoyé par pierrot10

Par exemple, je dois pouvoir cocher

* Température Bas, Température Haut, Batterie (Les température sont du meme type)
* Batterie, Direction du vent
* Vitesse du vent, Direction du vent
* Température Bas, Température Haut, Vitesse du vent [] si as dit qu'on ne pouvait pas sélectionner température

Tu n'avais pas préciser qu'on ne pouvait pas sélectionner Vitesse du vent, Direction du vent, (Température Haut ou Bas ou même Batterie...) même si les deux premiers capteurs sont de la même famille (5).

Sinon puisque tu dis qu'on ne peut pas sélectionner plus que 2 types différents et peu importe la famille, on peut donc simplifier le code (que j'ai modifié dans mon poste précédant) et l'utiliser vu qu'il est beaucoup moins long de celui que tu utilises.

Salut Tafika

En fait, mes graph ne me permette de représenter des courbes selon l'axe Y de gauche et de droite. Mais je ne peux présenter qu'un unité de mesures sur l'axe Y de gauche, et une autre unité sur l'axe Y de droite.

J'ai plusieurs mesures

Température (°C)
Voltage (V)
Vitesse du vent (km/h)
Direction du vent (°)
Radiation solaire (W/m2)

Pour la plupart des stations, il n'y a que deux mesures, mais pour deux stations, elle mesure, la température, l'état de la batterie, le vent, et le rayonement solaire. Donc 4 unités de mesures différentes.

Je classe mes sondes par type d'unité et famile

Dans la cas de la station 21, elle mesure le vent, le rayonnement solaire, la batterie, soit 4 unités différentes. Dans ce cas je ne dois pas pouvoir sélectionner plus de deux checkbox et si je coche un troisiès un des deux premiers doit se délectionner.

Quand j'avais écris ce post, je pouvais sélectioner Température bas (bas de la vignes) température gaut (haut de la vigne), et si en plus de cela, je mesure la vitesse du vent et l'état de la batterie. Je dois pouvoir sélectionner en même temps soit

* Vitesse du vent et direction du vent
* batterie et vitesses du vent, ou direction du vent, etc.,
soit toujours deux checkbox d'unités différentes
* par contre je dois pouvoir sélectionner Temolrature bas et température haut, ET une autre checkbox, car j'ai toujours deux unités différents malgré ke fait que j'ai sélectionner trois checkbox.

Mais entre-temps j'ai changé l'affichage de mes checkbox. Je n'affiche plus les checkbox par capteurs mais par type soit:
* Températures (au lieux de temp bas/haut)
* Vitesse du vent
* Direction du vent
* Voltage
* etc..

Je vais regarder ta solution jquery ez he vais la remplacer par la mienne, mais pour le moment la mienne consiste en

1. Je mémorise le checkbox qui a été cliqué
2. Je remonte sur son parent (<form>) et je liste dans mon array 'type' tous mes checkbox
3. Je supprime mes doubles (dans le cas ou il y a deux capteurs du même type (même unité)
3. Si mon array 'type' contient plus de deux types, je supprime soit le premier, soit le dernier si le premier a le même type que celui qui a été cliqué (car évidement, s'il a été cliqué, il ne faut pas qu'il soit retiré
4. Je refait une loop sur mes checkbox, et je décoche tous les checkbox qui ne sont pas dans mon array 'type'

Voici mon code, mais honnêtement, c'est du bricolage. Ca marche, mais il faudra que j'optimise ceci, c'est pourquoi j'irai voir ta proposition. Merci!!!!
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 $(".form-style input[type='checkbox']").on('change',function() { //var array=[]; var selected = 0; var types = []; var date = $("#form1").serialize(); // J'ai besoin de ceci pour récupérer la date d'un autre formulaire qui ne contient que des deux champs dates (debut/fin) // Get the checked box if($(this).is(':checked')){ selected = $(this).data("type"); //console.log("selected: ",selected); } // Loop the checkbox from the form and get the type number into an array $(this).closest("form").find('input:checkbox').each(function () { //array.push($(this).data("type")); if($(this).prop('checked')){ types.push($(this).data("type")); } }); //console.log("array: ",array); // Clean duplicates types = removeDuplicateInArray(types); //console.log("types:", types); // Keep two types if(types.length > 2){ //console.log("types[0]:",types[0]); if(types[0] == selected){ types.pop(); // remove the last } else{ types.shift(); // remove the first } if(types.length > 2){ if(types[0] == selected){ types.pop(); // remove the last } else{ types.shift(); // remove the first } if(types.length > 2){ if(types[0] == selected){ types.pop(); // remove the last } else{ types.shift(); // remove the first } } } } // console.log("types:", types); // Clean the checked checkbox $(this).closest("form").find('input:checkbox').each(function () { //console.log("fam:" + $(this).data("family") + "; sensor: " + $(this).data("sensor") + "; type:" + $(this).data("type") + "; name:" +$(this).attr("name")); if(findValueInArray($(this).data("type"),types) == false){ // $('[data-type="' + $(this).data('type') + '"]').prop("checked", false); $(this).data("type",$(this).data('type')).prop("checked", false); } }); //Send now the type to get_value console.log("types:", types); if(findValueInArray(5,types)) { if(types[1] == 5 ){ types.reverse(); } } console.log("types:", types); var type_0; var type_1; if(types[0]==undefined) { type_0 = 0; } else { type_0 = types[0]; } if(types[1]==undefined) { type_1 = 0; } else { type_1 = types[1]; } var id_station = $(this).closest("form").data("station"); var id_field = $(this).closest("form").data("field"); get_measures(id_field, id_station, type_0, type_1, date); });

Bonjour,

Pour compléter ma solution, on doit passer 5 variables à la fonction qui affiche le graphe id_station, id_field, type_1, type_2 et date.

Pour les deux premiers + la date tu les as déjà, tu peux donc ajouter seulement une $.map() pour ne récupérer que les types valides et vérifier les doublons avec includes, bref le code final :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
$(".form-style").on('change', "[type='checkbox']", function() {
  var form = $(this).closest('.form-style'),
    Checked = form.find('[data-type]:checked'),
    dtThis = $(this).attr('data-type');
  if ($(this).is(':checked')) {
     $(
        $.grep(Checked, (el, i) => {
          let dt = $(el).attr('data-type');
          return 
            !$(el).is(this) && dt != dtThis &&
            !$(el).is(form.find('[data-type!="' + dtThis + '"]:checked').first().get(0)) &&
            form.find('[data-type="' + dt + '"]:checked').not(el).length < form.find('[data-type="' + dtThis + '"]:checked').length;
        })
      )
      .prop('checked', false);
 
    //gestion des types :
    let types = [],
      type_0, type_1,
      date = $("#form1").serialize(),
      id_station = form.attr("data-station"),
      id_field = form.attr("data-field");
    $.map(form.find('[data-type]:checked'), (el, i) => {
      if (!types.includes($(el).attr('data-type'))) types.push($(el).attr('data-type'));
    });
    type_0=types[0]?types[0]:0;
    type_1=types[1]?types[1]:0;
    console.log('type :', types,type_0,type_1);
   //appel à la fonction affichant le graphe
    get_measures(id_field, id_station, type_0, type_1, date);
  }
});