這三個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