checkbox pour les nuls [Résolu]

rambc · 18/12/2010, 21h09

Bonsoir,
j'ai récupéré le code suivant sur le site de jQuery.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script>
function countChecked() {
  var n = $("input:checked").length;
  $("div.message").text(n + (n <= 1 ? " is" : " are") + " checked!");
}
 
$(document).ready(function(){
  countChecked();
  $(":checkbox").click(countChecked);
});
    </script>
  </head>
 
  <body>
    <form>
      <input type="checkbox" name="newsletter" checked="checked" value="Hourly">Hourly</input>
      <input type="checkbox" name="newsletter" value="Daily">Daily</input>
      <input type="checkbox" name="newsletter" value="Weekly">Weekly</input>
      <input type="checkbox" name="newsletter" checked="checked" value="Monthly">Monthly</input>
      <input type="checkbox" name="newsletter" value="Yearly">Yearly</input>
    </form>
    <div class="message">
    </div> 
  </body>
</html>

J'aimerais connaître la checkbox qui a été changée. Comment faire ?

danielhagnoul · 18/12/2010, 23h45

Bonsoir

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
$(":checkbox[name='newsletter']").click(function(){
	var objChecked = $("input[name='newsletter']:checked"),
		n = objChecked.length,
		tab = [];
 
	for(var i = 0; i < n; i++){
		tab.push("index = ",
				 $(objChecked[i]).index(":checkbox[name='newsletter']"),
				 ", valeur = ",
				 $(objChecked[i]).val(),
				 "<br/>");
	}
 
	$("div.message").html(tab.join(""));
});

rambc · 18/12/2010, 23h46

Bon j'ai fait ceci.

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script>
var choices = {
        "rub1": true,
        "rub2": true,
        "rub3": true,
        "rub4": true,
    },
    textForChoices = {
        "rub1": 'Rubrique 1',
        "rub2": 'Rubrique 2',
        "rub3": 'Rubrique 3',
        "rub4": 'Rubrique 4',
    },
 
function message(id){
  var textForChoice = "";
  choices[id] = !choices[id];
 
  for(oneRub in choices){
    if(choices[oneRub]){
      if(textForChoice == ""){
        textForChoice = textForChoices[oneRub]
      }else{
        textForChoice += ", " + textForChoices[oneRub]
      }
    }
  }
 
  if(textForChoice == ""){
    textForChoice = "Pas de selection";
  }else{
    textForChoice = "Selection : " + textForChoice;
  }
  return textForChoice;
};
 
$(document).ready(function(){
    $('.checkboxList input').attr('checked', true);
    $('.checkboxList input').click(function() {
      $('#message')
        .hide()
        .html(message($(this).val()))
        .fadeIn('slow');
    });
});
    </script>
  </head>
 
  <body>
      <div class="checkboxList">
Ce que vous souhaitez voir :
<br />
<input type="checkbox" value="rub1" /> Rubrique 1
<br />
<input type="checkbox" value="rub2" /> Rubrique 2
<br />
<input type="checkbox" value="rub3" /> Rubrique 3
<br />
<input type="checkbox" value="rub4" /> Rubrique 4
      </div>
      <div id="message"></div>
  </body>
</html>

rambc · 18/12/2010, 23h52

Merci danielhagnoul, ta méthode est moins naïve que la mienne.

18/12/2010, 23h52	#4
rambc Membre Expert Inscription : décembre 2006 Messages : 2 048 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 2 048 Points : 1 087 Points : 1 087	Merci danielhagnoul, ta méthode est moins naïve que la mienne.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email