【jQuery】radio button group 的操作

JQuery

 
<script>
    $(function()
    {   // 當 radio 被選取時, 文字變成 藍色
        $('input:radio[name=buy_type]').click(function() 
                                            {
                                                $('.rgpBuytype').css('color', 'black');     // 所有的 radio 文字回復成 黑色
                                               
                                                // 選取的 radio 文字變 藍色
                                                // 先取得被選取的 radio button 的 value
                                                // 將 value 轉換成 div 的 id
                                                $('#'+$(this).val()).css('color', 'blue');
                                            });
    });
</script>

...
...
 

HTML

所有同一組的 radio button 的 name 需相同
外面包一個 div，並且宣告其 class，可以對所有同組的 radio button 的屬性做同時且一致的變化，在本例中，就是讓所有 radio button 的文字變成黑色

 
<div class="rgpBuytype" id="ans1" ><input type="radio" name="buy_type" value="ans1" />答案一</div>
<div class="rgpBuytype" id="ans2" ><input type="radio" name="buy_type" value="ans2" />答案二</div>
<div class="rgpBuytype" id="ans3" ><input type="radio" name="buy_type" value="ans3" />答案三</div>
 

取得被選取的 radio button 的值的方法

 
var buy_type = $('input:radio[name=buy_type]:checked').val();