铁头娃（checkbox,radio,select）

这三个input的类型，绝对把脑袋都整大，头皮发麻，原生进行处理，以及在jq里面的处理，都是比较基础，比较重要的知识点，同时不容易牢固掌握

html部分

<div class="radio-box">
        <div>咸蛋超人<input type="radio" name="superman"value="咸蛋"/></div>
        <dvi>铁旦火车侠<input type="radio" name="superman" value="火车侠"/></dvi>
    </div>
    
    <div class="check-box">
        <input type="checkbox" value="核弹攻击" class="weapon"/>核弹攻击
        <input type="checkbox" value="电子激光炮" class="weapon"/>电子激光炮
        <input type="checkbox" value="等离子射线" class="weapon"/>等离子射线
        <input type="checkbox" value="饱和火炮" class="weapon"/>饱和火炮
    </div>
    
    <div class="select_box">
        <select name="food" id="food">
            <option value="egg">egg</option>
            <option value="milk">milk</option>
            <option value="meat">meat</option>
            <option value="beaf">beaf</option>
            <option value="water">water</option>
        </select>
    </div>
    <input type="button" id="getinfo" value="收集信息"/>

因为只是简单实现这三个input的处理，并没有进行css的美化

js部分

<script>
        var getRdo = document.getElementsByName('superman');
        var getcheck = document.getElementsByClassName("weapon");
        //alert(getRdo[0].nodeName);
        var getButton = document.getElementById("getinfo");
        var getfood = document.getElementById("food");
        getButton.addEventListener('click',function(){
            //alert("hehe");
            var str_display = ""
                for (var i = 0;i < getRdo.length;i++) {
                    if(getRdo[i].checked == true){
                        str_display += getRdo[i].value + ",";
                    }
                }
                for (var j = 0;j < getcheck.length;j++) {
                    if(getcheck[j].checked == true){
                        str_display += getcheck[j].value + ",";
                    }
                }
                str_display += "选择的食物有: "
                for (var k = 0;k < getfood.length;k++) {
                    if(getfood.options[k].selected){
                        str_display += getfood[k].value + ",";
                    }
                }
            alert(str_display);
        },false);
        
        
    </script>

我觉得需要注意的是当你用返回html集合的选择器时，一定要加索引下标，不然在浏览器一般会看到选择的显示undefined

（1）radio里面name必须一致才有单选的效果

box.gif