js控制、获取复选框、下拉列表的信息

一.获取复选框信息（以问卷调查为例子）

 需求：选项为多选，且控制一个问题最多只能选择X个答案

jsp页面：
<form class="checkchoose" action="#">
    <!-- 开始循环 -->
        <c:choose>
            <c:when test="${not empty list_questions}">
                <c:forEach items="${list_questions}" var="var" varStatus="vs">
                    <div class="wrapper">
                        <div class="checkbox-box">
                            <input name="box2" type="checkbox" id="${var.answer_id}"onclick="countChoices(this)" />
                             <span>√</span>
                        </div>
                        <label for="usepwd">${var.answer_text</label>
                    </div>
                </c:forEach>
            </c:when>
        </c:choose>
</form>

js：判断选择是否超出最大限制
function countChoices(obj) {
            max = 2;
            box1 = obj.form.box1.checked;/*//
            box2 = obj.form.box2.checked;/*//
            box3 = obj.form.box3.checked;/*//
            count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0);/*//
            if(count > max) {
                //alert("对不起，你只能选择" + max + "个项目!");
                obj.checked = false;
            }
        }

逻辑：在每个input后面加个点击事件，只要一点击选项框的状态就变为checked，用条件运算符转换改了的为1以此计算用户选的选项个数，如果超出限制则将checked修改为false。

细思：打上/*//的代码行，重复。如果一个问题有10+个选项那我岂不是还要写那么多个box？

优化：用for循环，并将统计用户已选的项count封成单独的一个函数

var countCheckBoxs =function(checkBoxName){
        var checkBoxs = document.getElementsByName(checkBoxName);
         var count = 0;
         for(j=0;j<checkBoxs.length;j++){   
             if((checkBoxs[j]).checked==true){  
                 count++;
             }
         }
      return count;
    }

    function countChoices(obj) {
        var count = countCheckBoxs(obj.name);

        if (count > ${max_select_item}) {
            alert("对不起，你只能选择" + ${max_select_item} + "个项目!");
            obj.checked = false;
        }
    }

写在后面的话（TODO）
1.获取用户的选项信息post到服务器上
2. 用户提交，在submit按钮上添加监听事件检查用户是否漏答；

---

二. 获取下拉列表的信息（做一个年份选择卡）

需求:
1.从2011-2017，2011年起始年是固定的，2017为当前年即要不断更新；
2.默认选项为当前年
3.能获取到用户选择的年份（即列表框里的信息）

1.获取当前年，js自带函数 getFullYear()

var myDate= new Date(); 
var startYear=2011;//可以查阅的最早的数据
var nowYear=myDate.getFullYear();//最新年份 当前年 

2.下拉列表年份是不断更新的，所以不能在select里面写死，应该动态加载。

html：
<select name="year" id="select">

</select>
js动态加载：
var obj=document.getElementById('select') 
    for (var i=startYear;i<=nowYear;i++) { 
        obj.options.add(new Option(i+"年",i)); }
        /*i,i对应文本和value值*/} 

3.默认 选择当前年

obj.options[obj.options.length-1].selected=true;/*默认是从0开始计数*/

4.获取用户选择的年份值

 document.getElementById('select').onchange=function(){
                     console.log(this.options[this.options.selectedIndex].value)}

完。。
哦不，未完待续。。。