无法选择选中的单选按钮

Question

我有一张表格：

<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>

单击li时，我需要手动设置要检查的输入。提交时，我想知道选择了哪个输入。继承人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());
});

jsfiddle是here。但是，如果您检查控制台，您将看到：

val is 
undefined 

为什么我无法选择值？