Как нарисовать круг, чтобы обозначить выделение в HTML

Question

Env: jQuery, html

У Джона был большой обед, поэтому он может захотеть / может не захотеть есть этим вечером.

Если вы зададите этот вопрос студенту, он будетнужно или обвести (может хотеть, а может и не захотеть) ответить на него в тесте на бумаге.

Как вы имитируете рисование круга вокруг текста, когда он нажимает на эти слова, и переключают выделение, если он выбираетна другой вариант.Может ли кто-нибудь предоставить какой-нибудь базовый пример того, как этого добиться?

Есть ли лучший способ отметить выбор учащихся?

Answer 1

В идеале, вы должны использовать 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 2

Рассмотрим что-то вроде этого:

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 не будут отображать ваши довольно округлые границы. Ответ будет ... эм, "в квадрате".

Answer 3

ЭТО может быть полезно.

ЗДЕСЬ Вы можете увидеть некоторые примеры библиотеки.