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>';
 }

• Phoenix128_RiccardoT: Can you please post your HTML?
• Robert: here is the entire HTML pastebin.com/xMRzcfXR
• Phoenix128_RiccardoT: It is not clear... I do not see any Show/Hide, can you please explain better your problem?
• Robert: please take a look here? jsfiddle.net/jritchey/hy3r9kn4 at the top is two radio buttons, that is for show and and hide, the all process must be work like in this fiddle but I need to identify that radio buttons, because if you know magento you know that the radios buttons id is something like this: id="options_' . $_option->getId() . '" so I need to add a class or something to can add a jquery code.
• Robert: please tell me if everything is clear for you

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();
})

• Robert: I have that already added, but that is for the entire radio field, I need for each option, because I need to identify the option to can hide and show with jquery
• Phoenix128_RiccardoT: Check the article, it is for each option.
• Robert: like this is very incomod for client to complete this fields again, i need to find an direct solution, a global
• Phoenix128_RiccardoT: Do you need this solution based on the field content or for its position? Please specify what you need.
• Robert: let's talk on skype i will add you now