html中<radio>单选按钮控件标签用法解析及如何设置默认选中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中<radio>单选按钮控件标签用法解析及如何设置默认选中相关的知识，希望对你有一定的参考价值。
方法有两种。
第一种通过<select>的属性来设置选中项，此方法可以在动态语言如php在后台根据需要控制输出结果。
< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" selected = "selected" >2</ option >
< option value = "3" >3</ option >
</ select >
第二种为通过前端js来控制选中的项:
< script type = "text/javascript" >
function change()
document.getElementById("sel")[2].selected=true;
</ script >
< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" >2</ option >
< option value = "3" >3</ option >
</ select >
< input type = "button" value = "修改" onclick = "change()" />
获取<select>标签选中项文本的js代码为:
var val = document.all.Item.options[document.all.Item.selectedIndex].text;
var i=document.getElementById('sel').options[document.getElementById('sel').selectedIndex].value;
扩展资料
Radio 对象代表 html 表单中的单选按钮。在 HTML 表单中 <input type="radio"> 每出现一次，一个 Radio 对象就会被创建。
单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件句柄。您可通过遍历表单的 elements[] 数组来访问 Radio 对象，或者通过使用 document.getElementById()。
参考资料：百度百科-radio
参考技术A <input type="radio" name="radio" value="1">单选1<input type="radio" name="radio" value="2">单选2
<input type="radio" name="radio" value="3" checked>单选3
<input type="radio" name="radio" value="4">单选4
/**注意：name值一定要相同才能够单选，要默认选项，加一个属性checked就行了**/本回答被提问者和网友采纳
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 }
以上是关于html中<radio>单选按钮控件标签用法解析及如何设置默认选中的主要内容，如果未能解决你的问题，请参考以下文章