html--radio单选框

我是多久不写，都快忘完了...

最简单的单选框，相信会很有用；

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>

html--radio单选框

举个栗子:

推荐阅读更多精彩内容