jquery - Cannot get selected radio button selected -

i have form:

<form> <label>login method</label> <ul>     <li>         <label class="">safeword</label>         <input type="radio" value="safeword" name="auth-method" />     </li>     <li>         <label>multi-factor</label>         <input type="radio" value="multi_factor" name="auth-method" />     </li>     <li>         <label>digital certificate</label>         <input type="radio" value="digital_cert" name="auth-method" />     </li>     <li>         <button name="auth-method-submit" value="continue" class="continue">continue</button>     </li> </ul> 

i need manually set inputs checked when li clicked. on submit, want input has been choosen. heres js:

var selectedinput, selectedlabel;  $('form li *').click(function(event){  if (selectedlabel) {     selectedlabel.removeclass('selected'); }  if (selectedinput) {     selectedinput.prop("checked", false); }  selectedlabel = $(event.currenttarget.parentelement).find("label");  selectedinput = $(event.currenttarget.parentelement).find("input");  selectedlabel.addclass('selected'); selectedinput.prop("checked", true); });  $('button').click(function(event){ event.preventdefault();  console.log('val is'); console.log($("form input[type='radio']:checked").val()); }); 

the jsfiddle here. if check console however, see:

val  undefined  

why can not value selected?