Calling function on radio button
Question
I was looking into a website codes and try to it myself. This code works without any problem. When the user click on the radio button, "id=res" text should be changed automatically.
The problem is: When I click on the box, "id=res" text does not change. I have to click on the circle area of the radio button to achieve my purpose. I mean to change "id=res" text. Please see images.
Any suggestions are welcome. Thanks in advance.
<.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 pa { 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 }
1 answers
solution1
0 2021-03-02 15:16:23
first of all, if you use bootstrap, then take a look into the grid system of it.
You always need to have a container and then the row in it and then the columns. In case you want to use bootstrap properly. Additionally, can you provide the error? or at least the codes? I cant really understand what you are trying to achieve.
sorry for not commenting my reply. I still didnt get the 50 reps...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.