我的自定义CSS单选按钮在我的javascript中不被识别

我使用一个在线javascript编写器为我的个性测试创建javascript，作为工作项目的一部分，最初我将我的单选按钮作为默认设置，javascript工作。每个单选按钮的值在1到10之间，对应于预先确定的性格类型。

然而，我改变了单选按钮，让用户通过css更容易访问，并且看起来更好，因此javascript不起作用。希望有人能想出解决办法?当我在safari上运行错误控制台时，它指出它找不到变量:finish，这是表单上的操作。

自定义单选按钮CSS:

li{
  color: white;
  display: block;
  position: relative;
  float: left;
  width: 75%;
  height: 25px;
 border-bottom: 0px solid white;
}
li input[type=radio]{
  position: absolute;
  visibility: hidden;
}
li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 20px;
  padding: 25px 0px 25px 60px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: default;
  -webkit-transition: all 0.25s linear;
}
li:hover label{
 color: #ffd061;
}
li .check{
  display: block;
  position: absolute;
  border: 5px solid white;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
 z-index: 5;
 transition: border .25s linear;
 -webkit-transition: border .25s linear;
}
li:hover .check {
  border: 5px solid #ffd061;
}
li .check::before {
  display: block;
  position: absolute;
 content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
 left: 5px;
  margin: auto;
 transition: background 0.25s linear;
 -webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
  border: 5px solid #ffd061;
}
input[type=radio]:checked ~ .check::before{
  background: #ffd061;
}

input[type=radio]:checked ~ label{
  color: #ffd061;
}

<script>
function finish() {
var results = new Array("none","Part-Of-The-AU","Fresher","Edgy-Anthro-Student","Postgraduate","WannaBNOC","Corporate-Student","General-Course","Rich-Kids","Left-Wing-Social-Activist","Library-Queen");
 var nums = new Array(11);
 for(var i = 0; i < nums.length; i++) nums[i] = 0;
 for(var i = 1; i <= 10; i++) {
  var q = javascript:void(0)document.forms['quiz'].elements['question_'+i];
  if(q[0].type=='checkbox') {
   var n = 0;
  }
  for(var j = 0; j < q.length; j++) {
   if(q[j].checked) {
    var a = q[j].value.split(',');
    for(var k = 0; k < a.length; k++) {
     nums[a[k]]++;
    }
    if(q[j].type=='radio') break;
    else n++;
   }
   if(j == q.length-1&&q[j].type=='radio') {nums[0]++;}
  }
  if(q[0].type=='checkbox'&&((document.forms['quiz'].elements['question_'+i+'_min']&&n<document.forms['quiz'].elements['question_'+i+'_min'].value)||(document.forms['quiz'].elements['question_'+i+'_max']&&n>document.forms['quiz'].elements['question_'+i+'_max'].value))) nums[0]++;
 }
 var j = new Array('0');
 for (i in nums) if(nums[i]>nums[j[0]]){j=new Array(''+i);} else if(nums[i]==nums[j[0]])j[j.length] = i;
 //var o = '';for(var i in results)o+=results[i]+'='+nums[i]+''n';
 //alert(o);
 if(nums[0]!=0) {
  alert('You missed or incorrectly answered '+nums[0]+' questions!');
 }
 else if(j[0]==0) {
  alert('No result could be determined.');
 }
 else {
  location (results[j[0]]);
 }
}
</script>

表单中单选按钮样式的新方法:

<ul><li>
<input name="question_1" type="radio" value="10" id="j-option" >
    <label for="j-option">Library Vending Machines</label>
    <span class="check"> </span>
</ul></li>

原始样式:

 <input name="question_1" type="radio" value="10" >Library Vending Machines

表单开始:

<form name="quiz" action="javascript:finish();">

希望有人能解决这个问题。欢呼声