如何在html中画一个圆圈来表示选择

Question

环境：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 标记以反映表单或您想到的任何其他内容。

如果你愿意，当然可以让答案“不加圈”：

<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 和 Opera 都不会呈现您漂亮的圆形边框。答案将是……呃，“平方”。