javascript - 在单选按钮上调用函数

问题描述

我正在研究一个网站代码并自己尝试。此代码可以正常工作。当用户单击单选按钮时，“id=res”文本应自动更改。

问题是：当我单击该框时，“id=res”文本不会改变。我必须点击单选按钮的圆形区域才能达到我的目的。我的意思是更改“id=res”文本。请看图片。

欢迎任何建议。提前致谢。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
 <div class="job">
    <ul class="col-xs-12 field">
    <li class="col-xs-12 col-sm-6 selectedChoice">
    <label><input type="radio" name="TypeId" onclick="myFunction(this.value)" value="1" checked="checked">General</label></li>
    <li class="col-xs-12 col-sm-6 ">
      <label><input type="radio" name="TypeId" onclick="myFunction(this.value)" value="2" >Legal</label>
                             </li>
     <li class="col-xs-12 col-sm-6 ">
      <label><input type="radio" name="TypeId" onclick="myFunction(this.value)" value="3" >Medical</label>
     </li>
     <li class="col-xs-12 col-sm-6 ">
      <label><input type="radio" name="TypeId" onclick="myFunction(this.value)" value="4" >Technical</label>
     </li>
     <li class="col-xs-12 col-sm-6 ">
     <label><input type="radio" name="TypeId" onclick="myFunction(this.value)" value="5" >Academic</label>
     </li>
        </ul>
        </div>                                                                                       
                          
                                             
<span id="res" class="text-muted">1</span>

</body>
<script>
function myFunction(TypeId) {
  document.getElementById("res").innerHTML = TypeId;
}
</script>
</html>

#translRegForm .form-group p a {
  font-weight: 500;
  font-size: 16px;
  color: #314777
}

a:active,
a:focus,
a:hover {
  text-decoration: none
}

input[type=radio],
input[type=checkbox] {
  width: 0;
  height: 0;
  opacity: 0
}

#steps .stepWr .stepContent .job {
  padding-left: 32px;
  padding-right: 32px
}

#steps .stepWr .stepContent .job ul {
  display: inline-block;
  margin: 0 0 30px;
  padding: 0;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  overflow: hidden
}

#steps .stepWr .stepContent .job ul li {
  text-align: center;
  position: relative;
  float: left;
  margin: 0;
  list-style-type: none;
  height: 52px;
  line-height: 52px;
  border-right: solid 1px #bdbdbd;
  cursor: pointer;
  font-size: 18px;
  color: #212121
}

#steps .stepWr .stepContent .job ul li label {
  position: absolute;
  cursor: pointer;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 18px;
  color: #212121;
  font-weight: 400
}

#steps .stepWr .stepContent .job ul li.selectedChoice {
  background-color: #e3e3e3
}

#steps .stepWr .stepContent .job ul li:last-child {
  border-right: none
}

#steps .stepWr .stepContent .job ul.field {
  border: none;
  border-radius: 0
}

#steps .stepWr .stepContent .job ul.field li {
  text-align: left;
  border: 1px solid #bdbdbd;
  border-bottom: none
}

#steps .stepWr .stepContent .job ul.field li label input {
  float: left
}

#steps .stepWr .stepContent .job ul.field li:nth-child(4):after {
  display: block;
  position: absolute;
  content: '';
  right: 0;
  bottom: -1px;
  left: 0;
  border-bottom: solid 1px #bdbdbd
}

#steps .stepWr .stepContent .job ul.field li:nth-child(5) {
  border-bottom: solid 1px #bdbdbd
}

#steps .stepWr .stepContent .job ul.field li:nth-child(even) {
  border-left: none
}

#steps .stepWr .stepContent .job ul.field li:last-child {
  border-right: solid 1px #bdbdbd
}

标签： javascripthtml

javascript - 在单选按钮上调用函数

问题描述

解决方案

推荐阅读