Vérifier que mes checkbox sont ou non checked

**pierrot10** · 21/12/2020, 06h08

Bonjour à tous

J'ai ceci

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 21/12/2020, 10h18

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

**pierrot10** · 21/12/2020, 19h14

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$( "input:checked" ).length;

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

**pierrot10** · 21/12/2020, 19h53

Ha, bem je vrois que j'ai toruvé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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"));    
        });
 
 
    })

**pierrot10** · 22/12/2020, 11h29

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

Je pars sur ce code

Code JQUERY :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**pierrot10** · 22/12/2020, 13h41

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

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Vérifier que mes checkbox sont ou non checked

jQuery

Vue hybride

Discussions similaires

Partager

Partager