如何绘制一个圆圈来表示在html中的选择

Question

Env：jQuery，html

约翰吃了一顿丰盛的午餐，所以他可能想/今晚可能不想吃东西。

假设你向学生提出这个问题，他将不得不圈出（可能想要也可能不想要）在纸笔测试中回答它。

如何在他点击这些单词时模仿在文本周围绘制一个圆圈，如果他选择另一个选项则切换选择。有人可以提供一些关于如何实现这一目标的基本样本？

是否有更好的方式来标记学生的选择？

Answer 1

THIS可能是有用的。

HERE你可以看到库的一些例子。

Answer 2

理想情况下，您可以使用HTML单选按钮<input>，因为这些元素具有您正在查找的行为。你可以在这里堆放一些不引人注目的JS和CSS来隐藏实际的单选按钮，并使用其<label>来获得所需的外观。

就拿这个HTML：

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

使用下面的不显眼的jQuery，你隐藏的单选按钮和有效的行动转移到<label>周围：

$('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(); 

加入一些这方面的漂亮的CSS样式所有<label> S，特别是那些有.checked，你有你想要的。

Answer 3

考虑这样的事情：

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> 

这个想法应该是很容易适应的jQuery插件。您可以更改HTML标记以反映表单或您想要的任何其他内容。

可以让答案是当然的“uncircled”，如果你想：

<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> 

• 警告：CSS3不是最终版本，没有Internet Explorer的戏也不会使你漂亮的圆角边框。答案将是......呃，“平方”。