change classname of parent span element using javascript

you can add an event listener to radio button for click event or change event, use document.getElementById('L') to get the input, and inside event handler function use e.currentTarget to get current clicked input, you can use .classList += to add class to element, something like this:

var input = document.getElementById('L');
input.addEventListener("click", function(e){
   e.currentTarget.parentElement.classList += ' selected';
})

.selected{
background-color:#888888;
}

<label for="L">
 <span class="lbllevel1">
     <span class="label-size">L</span>
      <input id="L" name="size" type="radio" value="L">
  </span>
 </label>

var lInput = document.getElementById("L");
lInput.addEventListener("click", function() {
    lInput.parentNode.classList.add("selected");
})

You could listen to the change event of radio by then add parent element with selected class if radio is checked:

document.querySelector("#L").addEventListener("change", function () {
  // check if radio is checked
  if (this.checked)
  {
     // add .selected class to parent
     this.parentElement.classList.add("selected");
  }
});

working copy

<label for="L">
<span class="lbllevel1">
      <span class="label-size">L</span>
      <input id="L" name="size" onclick="changeAttr(this)" type="radio" 
value="L">
  </span>
</label>

<script>

 function changeAttr(ele)
{
    ele.parentElement.classList.add('newClass');
}

</script>

Please see if this is helpful or not :)

Check through name

if($("input:radio[name='Name']").is(":checked")) {
         //write your code         
}

Check through class

if($("input:radio[class='className']").is(":checked")) {
     //write your code         
}

Check through data

if($("input:radio[data-name='value']").is(":checked")) {
         //write your code         
}