Magento 1.9 – How to Get Selected Values of Product Custom Options?

I've toyed around for a while with configurable.js and replaced the fillSelect() function for a fillRadio() function that reads like this:

fillRadio: function(element){
    var attributeId = element.id.replace(/[a-z]*/, '');
    var attributes = this.getAttribute(attributeId);
    var options = this.getAttributeOptions(attributeId);

    var prevConfig = false;
    if(element.prevSetting) {
        prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
    }

    if(options) {
        var index = 1;
        var inputs = [];
        for(var i = 0; i < options.length; i++) {
            var allowedProducts = [];

            var input = document.createElement('input');
            jQuery(input).attr({
                type: 'radio',
                name: attributes.code,
                disabled: 'disabled',
                value: options[i].id,
                price: options[i].price,
                id: attributes.code + attributeId + '-' + i
            }).appendTo(element);

            var label = document.createElement('label');
            jQuery(label).attr({
                for: attributes.code + attributeId + '-' + i
            }).html(this.getOptionLabel(options[i], options[i].price)).appendTo(element);

            if(prevConfig) {
                for(var j = 0; j<options[i].products.length; j++) {
                    if(prevConfig.config.allowedProducts
                        && prevConfig.config.allowedProducts.indexOf(options[i].products[j])>-1){
                        allowedProducts.push(options[i].products[j]);
                    }
                }
            } else {
                allowedProducts = options[i].products.clone();
            }

            if(allowedProducts.size() > 0) {
                options[i].allowedProducts = allowedProducts;
                jQuery(input).removeAttr('disabled');
            }
            if(!element.options)
                element.options = [];
            element.options[i] = input;
            element.options[i].config = options[i];
        }
    }
}

I have also modified configurable.phtml file and removed the select tags and moved the id and classes to the input container:

<?php foreach($_attributes as $_attribute): ?>
    <dt><label class="required"><?php echo $_attribute->getLabel() ?></label></dt>
    <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
        <div class="input-box super-attribute-select" id="attribute<?php echo $_attribute->getAttributeId() ?>">
        </div>
    </dd>
<?php endforeach; ?>

Now I'm only debugging the javascript functions (event firing, etc) so that the radio buttons are disabled with every "main" option change

I've done something similar but not quite. Maybe it helps.
my task was to have a checkbox on each product page called gift wrap. If checked then, the sales team would know to wrap the product (they only had a single wrapping option).
So I did this in order to be able to port the wrap checkbox value from product to quote to order. (I could have used a custom option but it's ugly to add one option to a few thousand products).

I had an observer for the event sales_convert_quote_item_to_order_item.

public function checkGiftWrap($observer)
{
    $orderItem = $observer->getEvent()->getOrderItem();
    $item = $observer->getEvent()->getItem();
    $wrap = $item->getOptionByCode('wrap');
    if ($wrap){
        $options = $orderItem->getProductOptions();
        $options['wrap'] = unserialize($wrap->getValue());
        $orderItem->setProductOptions($options);
    }
    return $this;
}

I've rewritten the Mage_Catalog_Helper_Product_Configuration::getCustomOptions helper in order to tell Magento that my option is important and should treat it separately

<?php
class [Namespace]_[Module]_Helper_Product_Configuration extends Mage_Catalog_Helper_Product_Configuration
{
    public function getCustomOptions(Mage_Catalog_Model_Product_Configuration_Item_Interface $item){
        $options = parent::getCustomOptions($item);
        $wrap = $item->getOptionByCode('wrap');
        if ($wrap){
            $options = array_merge($options, array(unserialize($wrap->getValue())));
        }
        return $options;
    }
}

For the same reason I've rewritten Mage_Sales_Block_Order_Item_Renderer_Default::getItemOptions so my option will be displayed in the cart

<?php
class [Namespace]_[Module]_Block_Sales_Order_Item_Renderer_Default extends Mage_Sales_Block_Order_Item_Renderer_Default
{
    public function getItemOptions(){
        $result = parent::getItemOptions();
        $options = $this->getOrderItem()->getProductOptions();
        if (isset($options['wrap'])){
            $result = array_merge($result, array($options['wrap']));
        }
        return $result;
    }
}

and the admin name column for the order items grid:

<?php
class [Namespace]_[Module]_Block_Adminhtml_Sales_Items_Column_Name extends Mage_Adminhtml_Block_Sales_Items_Column_Name
{
    public function getOrderOptions(){
        $result = parent::getOrderOptions();
        if ($options = $this->getItem()->getProductOptions()) {
            if (isset($options['wrap'])) {
                $result = array_merge($result, array($options['wrap']));
            }
        }
        return $result;
    }
}

[EDIT]
It seams I missed something. I only implemented the option to add a giftwrap once the product is in the cart.
But I think you can use the same code in an event prior or after adding the item to the cart.

$data = array();
$data['label'] = Mage::helper('helper_alias')->__('Giftwrapping');
$data['value'] = Mage::helper('helper_alias')->__('Yes');
$product->addCustomOption('wrap', serialize($data));
$item->addOption($product->getCustomOption('wrap'));
$item->save(); //this line should be called only if it's not called by default after your event is dispatched.

That's it. I hope you can get something useful out of it.