input中单选按钮radio编写
Posted lcspring
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了input中单选按钮radio编写相关的知识，希望对你有一定的参考价值。
个人学习整理
1、编写HTM
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Gender</title> 6 </head> 7 <body onload="get_gender()"> 8 <div> 9 性别: <input type="radio" name="gender" id="g_man" value="1">男 10 <input type="radio" name="gender" id="g_woman" value="0">女 11 <input type="radio" name="gender" id="g_none" value="-1">保密 12 <br> 13 <button onclick="get_sex()">提交</button> 14 <p id="p1"></p> 15 </div> 16 </body> 17 </html>
2、在<script></script>中编写JS--接收数据库（此处接收数据库中性别的接口省略，使用的是onload先获取人员的id再填写性别）
1 //获取数据库中性别信息 2 //使用ajax操作 3 function get_gender(){ 4 //获取当前页面传过来的人员id 5 var urlParams=new URLSearchParams(location.search); 6 var $id=urlParams.get(id); 7 //1.获取异步对象 8 var xhr=new XMLHttpRequest(); 9 //4.绑定监听,获取响应get方法 10 xhr.onreadystatechange=function(){ 11 if(xhr.readyState==4 && xhr.status==200){ 12 var result=xhr.responseText; 13 var $gender=JSON.parse(result); 14 if($gender.gender==1){ 15 g_man.checked=true; 16 }else if($gender.gender==0){ 17 g_woman.checked=true; 18 }else{ 19 g_none.checked=true; 20 } 21 } 22 } 23 //2. 创建请求,打开链接 24 var url="../get_gender?id="+$uid; 25 xhr.open("get",url,true); 26 //3.发送请求 27 xhr.send(null); 28 }
3、编写JS-将人员性别传入数据库
1 function get_sex(){ 2 // 获取本页面的人员id 3 var urlParams=new URLSearchParams(location.search); 4 var $id=urlParams.get("id"); 5 //ajax--post方法 6 var xhr=new XMLHttpRequest(); 7 xhr.onreadystatechange=function(){ 8 if(xhr.readyState==4 && xhr.status==200){ 9 var result=xhr.responseText; 10 console.log(result); 11 } 12 } 13 xhr.open("post","../get_gender",true); 14 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 15 var gender=""; 16 if(g_man.checked){ 17 p1.innerHTML=g_man.value; 18 gender=g_man.value; 19 }else if(g_woman.checked){ 20 p1.innerHTML=g_woman.value; 21 gender=g_woman.value; 22 }else{ 23 p1.innerHTML=g_none.value; 24 gender=g_none.value; 25 } 26 var formdata="id="+$id+"&gender="+gender; 27 xhr.send(formdata); 28 }
以上是关于input中单选按钮radio编写的主要内容，如果未能解决你的问题，请参考以下文章
javascript [jQuery单选框选中与取消选中应用]记录jQuery使用过程中单选框选中与取消选中的坑。 #JS #jQuery #input #radio