Add class to the radio buttons

Question

I have a radio button in the Product View page at the custom options, this contain Hide and Show. Is there any way to add a class for each option? I need to hide everything that is under this field when the value Hide is checked and to display when select Show. I try to use this but is work only for hide.

     jQuery('div:contains("Show")').on('click', function(){
       jQuery(this).closest('dd').siblings().show();
    });
     jQuery('div:contains("Hide")').on('click', function(){
       jQuery(this).closest('dd').siblings().hide();
    });

PHP code for generate radio buttons:

                       $selectHtml .= '<li><input type="radio" id="options_' . $_option->getId() . '" class="'
                            . $class . ' product-custom-option" name="options[' . $_option->getId() . ']"'
                            . ($this->getSkipJsReloadPrice() ? '' : ' onclick="opConfig.reloadPrice()"')
                            . ' value="" checked="checked" /><span class="label"><label for="options_'
                            . $_option->getId() . '">' . $this->__('None') . '</label></span></li>';
                    }

Answer 1

Option 1

You need to add a custom field to your custom options and use it in your frontend.

Have a look here to understand how to add a new field:

http://magento.ikantam.com/qa/how-add-custom-attributes-custom-options

Then you will have to take that field's value and use for your css class in frontend.

Option 2

According to the snippet you gave and the additional information on your comments you can use the JavaScript approach:

var showRadio = jQuery('.product-options .display ul li:nth-child(1)').find('input');
var hideRadio = jQuery('.product-options .display ul li:nth-child(2)').find('input');

hideRadio.click(function() {
  jQuery('.product-options dd, .product-options dt').hide();
  jQuery(this).parents('dd').show();
  jQuery(this).parents('dd').prevAll('dt:first').show();
})
showRadio.click(function() {
  jQuery('.product-options dd, .product-options dt').show();
})