Récupérer état checkbox à labels

Bonjour,

J'ai récupéré un bout de code pour donner une apparence "interrupteur" à une checkbox contenant 2 labels "On" et "Off"

<label class="cb-enable"><span>On</span></label>
<label class="cb-disable selected"><span>Off</span></label>
<input type="checkbox" id="checkbox1" name="test" />

Jusque là, l'effet est impeccable ; à ceci près que je n'arrive pas à récupérer l'état de ma checkbox en jquery (je débute).

Voici les syntaxes que j'ai tenté :

console.log($('input[type=checkbox][name=test]').val())

-> renvoi toujours la valeur "On", quelque soit l'état de l'interrupteur...

console.log($('input[type=checkbox][name=test]')[0].checked)

-> renvoi toujours la valeur "false", quelque soit l'état de l'interrupteur...


j'aime trop le design "interrupteur" pour passer à autre chose : Please HELP
Modifié par Hansolo (11 May 2013 - 12:14)

Salut
Pour vérifier qu'une checkbox est cochée avec jquery :
http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery-or-javascript

Salut benj, merci pour ton intervention !
Cependant, mon problème subsiste même s'il semblerait venir d'ailleurs....

J'ai testé les solutions de ton lien et toujours le même résultat, sauf avec une checkbox indépendante.

J'ai 4 checkbox dans mon formulaire : checkbox1, checkbox2, checkbox3, checkbox4
-> console.log($('form #checkboxX').is(':checked')) sur l'une de ces 4 checkbox me retourne "false" quelque soit l'état de "l'interrupteur" (On/Off)
-> console.log($('form #checkbox5').is(':checked')) sur une checkbox indépendante que j'insère en fin de formulaire, sans class/p/label, me retourne bien false/true en fonction de l'état....... et c'est là que j'en perds mon latin


Pour un peu plus de détails, voici mon code

<p class="field switch">
     <label class="cb-enable"><span>On</span></label>
     <label class="cb-disable selected"><span>Off</span></label>
     <input type="checkbox" id="checkbox1" />
</p>
<p class="field switch">
     <label class="cb-enable"><span>On</span></label>
     <label class="cb-disable selected"><span>Off</span></label>
     <input type="checkbox" id="checkbox2" />
</p>
<p class="field switch">
     <label class="cb-enable"><span>On</span></label>
     <label class="cb-disable selected"><span>Off</span></label>
     <input type="checkbox" id="checkbox3" />
</p>
<p class="field switch">
     <label class="cb-enable"><span>On</span></label>
     <label class="cb-disable selected"><span>Off</span></label>
     <input type="checkbox" id="checkbox4" />
</p>

Le CSS qui va bien (avec l'image en pièce-jointe à ce post)

.cb-enable, .cb-disable, .cb-enable span, .cb-disable span {
background: url('../IMG/switch.gif') repeat-x;
display: block;
float: left;
}
.cb-enable span, .cb-disable span {
line-height: 30px;
display: block;
background-repeat: no-repeat;
font-weight: bold;
}
.cb-enable span {
background-position: left -90px;
padding: 0 10px;
}
.cb-disable span {
background-position: right -180px;
padding: 0 10px;
}
.cb-disable.selected {
background-position: 0 -30px;
}
.cb-disable.selected span {
background-position: right -210px;
color: #fff;
}
.cb-enable.selected {
background-position: 0 -60px;
}
.cb-enable.selected span {
background-position: left -150px;
color: #fff;
}
.switch label {
cursor: pointer;
}
.switch input {
display: none;
}

+ jQuery-1.8.2



Voilà, si une âme charitable a une idée du problème, ça serait vraiment cool


Pièce-jointe :

Salut,

Ta case à cocher est en display: none.
Du coup, difficile de la cocher ou décocher...

Tu peux voir un test avec la case à cocher ou sans (enlever le commentaire) ici

tm

Hmm, je viens de tester sans le "display:none" et ça marche pas mieux...

Cependant, ça me permets d'avancer dans le diagnostique, et c'est du côté JS que ça déconne car sans le "display:none", je peux jouer autant que je veux avec mes interrupteurs, les checkbox associées ne change pas, et vice-versa quand je joue avec les checkbox...

Je regarde à ça plus tard,
je re-posterai si j'aurai trouvé qqch de probant...

Merci à vous,
See ya.