CSS change actif sélection pour radio

J’utilise ce qui suit pour créer un commutateur au lieu de boutons radio – cela fonctionne très bien

.switch { display: block; float: left; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; font-weight: bold; text-transform: uppercase; background: #eee; border: 1px solid #aaa; padding: 2px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); margin-left: 20px; } .switch input[type=radio] { display: none; } .switch label { display: block; float: left; padding: 3px 6px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #aaa; cursor: pointer; } .switch label:hover { text-shadow: 0 0 2px #fff; color: #888; } .switch label.checked { background: #8fc800; color: #eee; text-shadow: 0 -1px 1px rgba(0,0,0,0.5); background: -webkit-linear-gradient(top, #8fc800, #438c00); background: -moz-linear-gradient(top, #8fc800, #438c00); background: -ms-linear-gradient(top, #8fc800, #438c00); cursor: default; } 

Et html:

 
 <input type="radio" name="weekly_new" id="weekSW-0"  value="Yes" /> ON <input type="radio" name="weekly_new" id="weekSW-1"  value="No" /> OFF  

Et jquery:

  $(".switch label:not(.checked)").click(function(){ var label = $(this); var input = $('#' + label.attr('for')); if (!input.prop('checked')){ label.closest('.switch').find("label").removeClass('checked'); label.addClass('checked'); input.prop('checked', true); } }); $(".switch input[checked=checked]").each(function(){ $("label[for=" + $(this).attr('id') + "]").addClass('checked'); });  

Comme vous pouvez le voir, label.checked indique au bouton son aspect. Ce que je veux faire, c’est avoir une couleur différente lorsque Non est sélectionné, mais rouge pour non, vert pour oui, révolutionnaire hein?

• Comment créer une barre de titre avec du texte à gauche et du texte à droite?
• désactiver le script de barre de navigation fixe sur le mobile
• Utiliser CSS3 transforme pour retourner (faire pivoter et redimensionner) un bloc
• hauteur de la vignette égale dans bootstrap3
• Définition de la transparence sur iFrame Inside Modal Popup

De toute façon, je ne peux pas savoir si cela peut être fait

J’ai atsortingbué des identifiants aux étiquettes et j’ai essayé par exemple

 .switch label.checked #yes { blah blah } 

Mais cela a rendu le style inutile!

Comme j’ai fait le code de cette façon, cela peut-il être fait?

J’ai créé un violon s’il est plus facile de jouer avec … obv devait mettre Valuse vérifié = vérifié comme je le charge normalement depuis la table mysql mais cela ne peut pas

http://jsfiddle.net/aS69U/

• Liste déroulante des dates, mois et années individuels dans le bootstrap
• Créer une boîte d’alerte jquery avec le code actuel
• zone de texte en HTML saute sur le focus
• Augmentation du nombre de divs, tout en utilisant jsPlumb
• Détecter la barre de défilement dynamicment

 .switch #no.checked { background:red; }