lightning:input checkbox label with url

Question

I have been tying to include "url/hyperlink" within a checkbox "label" using lightning input, but to no avail. Given is what I have tried and with the results, I want "Terms and Service" part of the checkbox to appear as hyperlink with a URL.

Lightning CMP

<aura:attribute name="termsText" type="String" default=""/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<div class="slds-size_1-of-1 slds-medium-size_1-of-2 slds-m-bottom_small slds-p-horizontal_x-small ">
    <lightning:input type="checkbox" label="{! v.termsText }" name="terms" value="{!v.chkTerms}" />
</div>

JS Controller

doInit : function(component, event, helper) {
    var terms = "Yes, by creating an account I agree to the \<a href='#'\>Terms and Service.\</a\>";
    component.set("v.termsText", terms);
}

Output

Desired Ouput

Answer 1

I achieved the results by using HTML-Checkbox and traditional anchor tag combination.

Lightning CMP

<aura:attribute name="chkTerms" type="Boolean"/>
<div>
    <input type="checkbox" id="terms" name="terms" value="{!v.chkTerms}" onchange="{!c.termsChanged}" ></input>
    <label for="terms"> Yes, by creating an account I agree to the <a href="#">Terms and Service.</a></label>
</div>

JS-Controller

And was able capture event and its value using JavaScript.

termsChanged : function(cmp, event, helper){
    cmp.set("v.chkTerms", document.getElementById("terms").checked );
    //console.log(event.getSource().get("v.checked"));
    // the above didn't work except for `ui:input` or `lightning:input`
    console.log(cmp.get("v.chkTerms") ); 
}