Comment faire un bouton Radio HTML gras sur les sélectionner?

En HTML, j'ai le texte suivant bouton radio choix

o Choix 1

o Choix 2

o Choix 3

Ce que je voudrais faire, c'est quand quelqu'un Choisit un bouton radio à partir de ci-dessus, que le texte correspondant à ce bouton radio sélectionné devient gras.

Ainsi, par exemple, si l'utilisateur sélectionne "Choix 2", le radio-bouton de sélection serait ressembler à ça:

o Choix 1

o Choix 2

o Choix 3

Comment dois-je faire? Je suppose soit en CSS ou JavaScript doit être utilisé.

Merci d'avance

Mise à JOUR: Comment voulez-vous mettre en œuvre "nickf" solution sans l'aide de jQuery?

cette page donne aussi un de très simple, de la conformité et de non-js solution

OriginalL'auteur | 2009-03-10

  1. 14

    Vous pouvez le faire uniquement avec du CSS, mais vous avez besoin d'envelopper le texte de chaque entrée dans un span ou un autre tag:

    <input type="radio" name="group1" value="Milk"><span>Milk</span><br>

    Utilisez le sélecteur de frères:

    input[type="radio"]:checked+span { font-weight: bold; }
    BTW, j'ai testé tout à l'heure et cela fonctionne au moins en FF2.
    Selon quirksmode.org/css/contents.html il ne sera probablement pas faire quoi que ce soit (c'est à dire, va dégrader gracieusement' 🙂 ) dans IE6, mais les autres navigateurs doivent gérer correctement.
    wow, exactement comme ma réponse
    En dépit de ne pas être totalement cross-browser, c'est une excellente solution.
    Crossbrowser, j'ai posté ce alors que la vôtre encore dit input[type="radio"][vérifié] et avant que vous avez ajouté des balises span...

    OriginalL'auteur Kev

  2. 8

    Vous pouvez essayer de tout faire avec les CSS.

    Je l'ai essayé et il œuvres1:

    <input type="radio" name="choice" value="1" checked /><span>First choice</span>
<input type="radio" name="choice" value="2" /><span>Second choice</span>

input[type="radio"]:checked + span
{
    font-weight: bold;
}

    Explication: Ce prises toutes les travées à la suite d'une radio d'entrée (type="radio") et est vérifiée.

    1 j'ai testé avec Firefox 3 et IE7 et il ne fonctionne qu'avec Firefox. (référence de compatibilité)

    l'élément d'entrée lui-même n'ont pas de texte pour le rendre gras.
    droit, fixe que
    Je l'ai changé pour le faire fonctionner, mais il ne fonctionne que sous Firefox.

    OriginalL'auteur mbillard

  3. 4

    Je ferais quelque chose comme ceci:

    <label><input type="radio" name="myRadio" value="1" /> One</label>
<label><input type="radio" name="myRadio" value="2" /> Two</label>
<label><input type="radio" name="myRadio" value="3" /> Three</label>

    Avec un onchange gestionnaire sur chaque élément pour modifier le CSS de la classe de la mère de l'étiquette. En jQuery, il devrait ressembler à ceci:

    $(':radio').change(function() {           //get all the radio buttons and
                                          //add an onchange handler
    var $label = $(this).parent('label'); //get a reference to the parent label
    if (this.checked) {                   //if the radio is on...
        $label.addClass('selected');      //add the CSS class "selected" to the label
    } else {                              //otherwise...
        $label.removeClass('selected');   //take the class away.
    }
});

    N'oubliez pas de remplacer le style par défaut des étiquettes (qui est en gras):

    label {
    font-weight: normal;
}
label.selected {
    font-weight: bold;
}
    En dépit de soumettre une réponse différente, je pense que c'est comment il devrait être fait.
    Comment voulez-vous le faire sans l'aide de jQuery???
    À l'aide d'un événement onChange, et de vérifier si le bouton radio est sélectionné.
    Il serait onclick, pour les boutons radio.
    Quel est le code? B/c des choses comme $(':la radio") semblent être jQuery spécifiques.

    OriginalL'auteur nickf

  4. 2

    Utiliser l'événement OnChange de votre select pour modifier le style css de l'élément choisi en gras.

    Vous ne pouvez pas l'utiliser pour modifier le style du bouton lui-même - seulement le texte de l'étiquette peut être changé comme ça. Si vous regardez à sa question, il semble vouloir le petit cercle en gras.

    OriginalL'auteur Assaf Lavie

  5. 0
    <input type=button onClick="this.style.fontWeight=bold">

    Cela pourrait fonctionner, je n'ai pas testé par moi-même. Bien sûr, il ya beaucoup plus agréable solutions.

    Si vous aviez un framework JavaScript (comme jQuery) inséré dans votre code, il a probablement beaucoup de fonction à disposition à faire de même. Sélecteurs, produits coiffants, css gestionnaires et beaucoup plus.

    Je préfère vous suggérons de créer une classe CSS comme ceci:

    .felkover
{
    font-weight: bold;
}

    Puis il suffit d'ajouter ou de supprimer cette définition dans le attribut de classe de n'importe quel bouton.

    Il est possible de sélectionner à l'aide du clavier. Utiliser l'événement onChange de la place et inspecter le " cette.vérifié la propriété.
    Aussi, la première solution est juste de laisser quoi que ce soit vous cliquez sur gras, plutôt que de unbolding sélections précédentes comme il se doit.
    Correct. Je ne pense pas que onChange. nickf a une meilleure mise en œuvre ci-dessus.
    onchange n'est pas fiable sur les boutons radio, mais onclick est déclenché même sur la non-activation de la souris. Aussi, bien sûr, " cela.style.fontWeight’ ne fait rien sur le bouton radio à lui-même, c'est l'étiquette qui est important.

    OriginalL'auteur pestaa

  6. 0

    Voici un exemple : 

    <script>
  function makeBold()
  {
    var radios = document.getElementsByName("sex");
    for (var index = 0; index < radios.length; index++)
    {
      if (radios[index].checked)
      {
        document.getElementById("span_" + radios[index].value).style.fontWeight='bold';
      }
      else
      {
        document.getElementById("span_" + radios[index].value).style.fontWeight='normal';
      }
    }
  }
</script>

<input type="radio" name="sex" value="male" onclick="makeBold();"> 
<span id="span_male">Male</span>

<br>
<input type="radio" name="sex" value="female" onclick="makeBold()"> 
<span id="span_female">Female</span>

    EDIT : Vous devez définir votre texte s'étend avec des id comme ceci : span_

    Est-ce à unbold bouton d'option sélectionné de texte dans le cas où je changer mon choix de réponse?
    oui, le copier dans un fichier HTML et de les essayer 🙂

    OriginalL'auteur Canavar

  7. -1

    amusant vos boutons ont des étiquettes autour d'eux pour comprendre le texte, je voudrais ajouter ceci à l'aide d'étiquettes.

    <label onchange="this.parent.children.fontWeight='normal';this.fontWeight='bold';">

    Mais idéalement, je n'avais pas mis ce code en ligne, mais l'accrocher à eux à partir de quelque part dans la tête une fois la page chargée.

    Il n'y a pas d'événement comme HTMLLabelElement.onchange.
    lol, c'est tout à fait vrai. Je suppose que je ne pensais pas.

    OriginalL'auteur defrex