Comment dessiner un cercle pour désigner la sélection en html

Question

Env: jQuery, html

John avait un grand déjeuner, alors il pourrait vouloir/pourrait ne pas vouloir manger ce soir.

En supposant que vous posiez cette question à un étudiant, il devra soit encercler (peut-être ou ne pas vouloir) répondre au test papier-crayon.

Comment imiter un cercle autour du texte lorsqu'il clique sur ces mots et basculer la sélection s'il sélectionne l'autre option. Quelqu'un peut-il fournir un échantillon de base sur la façon d'y parvenir?

Y a-t-il une meilleure façon de marquer la sélection des étudiants?

Answer 1

THIS peut être utile.

HERE vous pouvez voir quelques exemples de la bibliothèque.

Answer 2

Idéalement, vous utiliseriez les éléments du bouton radio HTML <input> car ils ont le comportement que vous recherchez. Vous pouvez empiler des JS et CSS discrets sur ceci pour cacher le bouton radio actuel et utiliser son <label> pour obtenir le look désiré.

Prenez par exemple ce code HTML:

<label><input type="radio" name="question-one" value="yes"> Yes</label> 
<label><input type="radio" name="question-one" value="no"> No</label> 

Utilisation du jQuery discret suivant, vous cacher le bouton radio et de transférer efficacement ses actions au <label> autour:

$('input[type=radio]').each(function(){ 
    $(this).parent().click(function(){ 
     $(this).children('input').click(); 
     $('label').removeClass('checked'); 
     $('label:has(input[type=radio]:checked)').addClass('checked'); 
    }); 
}).hide(); 

Ajouter à cette quelques-uns CSS astucieux de style tous <label> s, en particulier ceux qui sont .checked, et vous avez ce que vous voulez.

Answer 3

Tenir compte quelque chose comme ceci:

CSS

<style type="text/css"> 
span.answer{ 
    text-decoration: underline; 
    border: none; 
    padding: 2px; 
    cursor: pointer; 
} 

span.answer_selected{ 
    border: 1px solid red; 
    -webkit-border-top-right-radius: 10px; -webkit-border-top-left-radius: 10px; 
    -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; 
    -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; 
    -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; 
} 
</style> 

Javascript

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("div.question > span.answer").click(function() { 
      $(this).siblings(".answer").removeClass("answer_selected"); 
      $(this).addClass("answer_selected"); 
     } 
    ); 
}); 
</script> 

HTML

<div class="question" id="q_1">question 1<br/> 
     <span class="answer" id="a_1">answer one</span>/
     <span class="answer" id="a_2">answer two</span> 
    </div> 

    <div class="question" id="q_2">question 2<br/> 
     <span class="answer" id="a_1">answer one</span>/
     <span class="answer" id="a_2">answer two</span> 
    </div> 

Cette idée devrait être assez facile à adapter à un plugin jQuery. Vous pouvez changer les balises HTML pour refléter un formulaire ou tout ce que vous aviez en tête.

Vous pouvez laisser les réponses être « uncircled » bien sûr, si vous voulez:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("div.question > span.answer").click(function() { 
     if ($(this).hasClass("answer_selected")){ 
      $(this).removeClass("answer_selected");   
     } else { 
      $(this).siblings(".answer").removeClass("answer_selected"); 
      $(this).addClass("answer_selected"); 
     } 
    }); 
}); 
</script> 

• mise en garde: CSS3 est pas définitive et ni Internet Explorer, ni l'opéra rendra vos frontières assez arrondies. La réponse sera ... euh, "au carré".