DOM Traversing

HTML

<div style="display: block;">                
				    <span style="padding-right: 20px;padding-left: 2px;">Gasoline:</span><input type="radio" name="GasolineUnit" id="rdGasolineUnitGallons" value="1" runat="server" checked="true" tabindex="" clientidmode="Static" />
				    &nbsp;<label for="rdGasolineUnitGallons">Gallons</label>
				    &nbsp;&nbsp;&nbsp;
				    <input type="radio" name="GasolineUnit" id="rdGasolineUnitLiters" value="0" runat="server" tabindex="" clientidmode="Static" />
				    &nbsp;<label for="rdGasolineUnitLiters">Liters</label>
			</div>
<br/>

<p >Average Fuel Price Per <span  id="spFuelPriceUnit" runat="server">Gallon</span></p>

JavaScript

$(document).ready(function(){
    
    $('#rdGasolineUnitLiters').on("click", displayGasolineUnit);
    $('#rdGasolineUnitGallons').on("click", displayGasolineUnit);  
    
    function displayGasolineUnit() {
    var spUnit = $('#spFuelPriceUnit');
        //alert(spUnit.text());
    if ($('#rdGasolineUnitGallons').is(":checked")) {
        spUnit.text('Gallon');
    } else {
        spUnit.text('Liter');
    }
        //alert(spUnit.text());
   }
});