I have some images img and radio options ui:inputRadio

<img alt="visa" onclick="{!c.handleCreditCardLogoClick }" src="{!$Resource.cclogos + '/logo-download-centre_visa.png'}" />
<img alt="mastercard" onclick="{!c.handleCreditCardLogoClick }" src="{!$Resource.cclogos + '/logo-download-centre_mastercard.png'}" />

<ui:inputRadio aura:id="visa" name="type" text="visa" change="{!c.handleCreditCardChange}" />
<ui:inputRadio aura:id="mastercard" name="type" text="mastercard" change="{!c.handleCreditCardChange}" />

When the logo is clicked, I want to update the correct radio button.

My code works if you only click the logos or only click on the radio options.

JavaScript Controller:

handleCreditCardChange: function (cmp, event, helper) {
    let creditcard = event.getSource().get("v.text");
    // do stuff
handleCreditCardLogoClick: function (cmp, event, helper) {
    let creditcard = event.target.alt;
    let option = cmp.find(creditcard);
    option.set("v.value", true);

If you click on a radio option, then click on a logo, the logo click does not change the state of the related radio option.


  1. What am I doing wrong?
  2. How can I get a consistent behaviour when clicking on either the logo or radio option?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.