Mark a radio element as selected on page load and when clicked I have the following javascript that calls a function on page load and on click of an element on my page. Is this the cleanest way to do this?

StyleSelectedPlan();

$(document).on('click', '.select-plan', function () {
    StyleSelectedPlan();
});

function StyleSelectedPlan() {
    $('.radio-wrapper').removeClass('selected');
    $('.select-plan:checked').closest('.radio-wrapper').addClass('selected');
}
As @elclanrs says, function () { StyleSelectedPlan(); } is redundant — you can just write StyleSelectedPath.

Since you're using jQuery, you should use $(document).ready(handler), or better yet, $(handler), to call the handler function when the page loads.



$(StyleSelectedPlan).on('click', '.select-plan', StyleSelectedPlan);

function StyleSelectedPlan() {
    $('.radio-wrapper').removeClass('selected');
    $('.select-plan:checked').closest('.radio-wrapper').addClass('selected');
}
.radio-wrapper.selected { color: green; }
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;ul&gt;
  &lt;li class="radio-wrapper"&gt;&lt;input name="name" type="radio" class="select-plan" id="one"&gt;&lt;label for="one"&gt;one&lt;/label&gt;&lt;/li&gt;
  &lt;li class="radio-wrapper"&gt;&lt;input name="name" type="radio" class="select-plan" id="two"&gt;&lt;label for="two"&gt;two&lt;/label&gt;&lt;/li&gt;
  &lt;li class="radio-wrapper"&gt;&lt;input name="name" type="radio" class="select-plan" id="three" checked&gt;&lt;label for="three"&gt;three&lt;/label&gt; (preselected)&lt;/li&gt;
&lt;/ul&gt;