如何繪製一個圓圈來表示在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的戲也不會使你漂亮的圓角邊框。答案將是......呃，「平方」。