Rich-text Reply

How do I remove radio button presets using jquery?

Gerry 06-15-16
Accepted Solution

How do I remove radio button presets using jquery?

Hi

I wonder if anyone can help me. I'm a marketer not a developer and don't currently have any developer resource I can access so wanted to see if the Optiverse could help.

 

I'd like to run an experiment where I remove the radio button presets on my variation. I want to see what this will do to user behaviour. How would I achieve this using jquery? You can see the radio buttons in attached PNG. The code for each is as follows:

 

<div class="radioContainer">
<input checked="checked" data-bind="checked: IsFullLegalExpensesSelected, checkedValue: false, event: { click: function(data, event) { return homeprotect.logUARadioButton('IsFullLegalExpensesSelected', 'false', data, event) } }" data-val="true" data-val-required="The IsFullLegalExpensesSelected field is required." id="IsBasicLegalExpensesSelected" name="IsFullLegalExpensesSelected" type="radio" value="false">

<span class="custom-styled-radio fa-stack stacked">
<i class="fa fa-stack-2x"></i>
<i class="fa fa-stack-1x"></i>
</span>
<label for="IsBasicLegalExpensesSelected">Included</label>
</div>


<div class="radioContainer">
<input checked="checked" data-bind="checked: IsFullHomeEmergencySelected, checkedValue: false, event: { click: function(data, event) { return homeprotect.logUARadioButton('IsFullHomeEmergencySelected', 'false', data, event) } }" data-val="true" data-val-required="The IsFullHomeEmergencySelected field is required." id="IsBasicHomeEmergencySelected" name="IsFullHomeEmergencySelected" type="radio" value="false">

<span class="custom-styled-radio fa-stack stacked">
<i class="fa fa-stack-2x"></i>
<i class="fa fa-stack-1x"></i>
</span>
<label for="IsBasicHomeEmergencySelected">Included</label>
</div>

 

How would I remove these presets for my variation?

 

Many thanks

 

Gerry

 

 

LAO radio buttons.png
Level 2

beckyhall 06-15-16
 

Re: How do I remove radio button presets using jquery?

Hi Gerry,

 

You can uncheck the radio buttons very simply by setting the 'checked' property to false.

    with jQuery:

    $('#IsBasicLegalExpensesSelected').prop('checked',false);

    with regular JavaScript&colon;

    document.getElementById('IsBasicLegalExpensesSelected').checked = false;

 

However, it looks like you also have 'custom radio buttons' in addition to the actual radio button input elements. Not to go into too much depth here, but radio buttons are in many ways unstylable, so a common practice is to hide the radio button, show an image designed to look like a radio button, and linking the two so clicks to the image check or uncheck the actual radio button appropriately. In this case you will not only need to uncheck the actual radio button, but make the image appear unchecked as well.

 

Ideally this goal could be accomplished by simply removing a 'checked' class on the fake radio button, but in your case, it looks like you might have to hide that green circle manually and in the same manner that it would be hidden if the user selected the other radio button (so your current check & uncheck functions don't break).

 

If you know of an 'uncheck' function that already exists in your codebase, you may just be able to call that. Otherwise, my first guess would be jQuery's .hide() being called on that green circle. However you decide to go about it, make sure you test thoroughly in all the browsers/versions/devices your site supports!

-Becky
Gerry 06-15-16
 

Re: How do I remove radio button presets using jquery?

Thank you Becky, I really appreciate you taking the time to help me out here.
Level 2