我是多久不写,都快忘完了...
最简单的单选框
,相信会很有用;
input 的
type
很多,设置为radio
,是小圆圈可勾选的单选框,多个
的话需要绑定同一个name值
,value值一般是要传到后台的,也可以用ng-model;
<input type="radio" name="NAME" value="VALUE1">
举个栗子:
- html
<form action="radio_submit" method="get" accept-charset="utf-8" >
请选择应用系统:
<br>
<br>
<label>
<input type="radio" name="applicationSystem" value="1" checked>C管理平台</label>
<label>
<input type="radio" name="applicationSystem" value="2">云服务平台</label>
<label>
<input type="radio" name="applicationSystem" value="3">上药集团</label>
<label>
<input type="radio" name="applicationSystem" value="4">云商大健康系统</label>
</form>
- js(添加监听事件,获取选中的value值)
在每个input上添加点击事件
window.onload = function() {
var allNode = document.getElementsByTagName("input");
for (var i = 0; i < allNode.length; i++) {
allNode[i].addEventListener('click', function() {
console.log(this);
console.log(this.value);
}, false);
}
};
貌似一般也不这样写,在父节点上添加监听事件,获取唯一的id为demo的form元素;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="demo" action="" method="get">
请选择应用系统:
<br>
<br>
<label>
<input type="radio" name="applicationSystem" value="1" checked>C管理平台</label>
<label>
<input type="radio" name="applicationSystem" value="2">云服务平台</label>
<label>
<input type="radio" name="applicationSystem" value="3">上药集团</label>
<label>
<input type="radio" name="applicationSystem" value="4">云商大健康系统</label>
</form>
<script>
var oDemo = document.getElementById("demo");
oDemo.addEventListener('click', function() {
var e = event || window.event;
if (e.target && e.target.nodeName.toUpperCase() == "INPUT") {
console.log(this);
console.log(e.target);
console.log(e.target.value);
}
}, false);
</script>
</body>
</html>