Get check box information (take a questionnaire as an example)

 Requirements: Multiple choices, and control of a question can only select up to X answers

jsp Page:
<form class="checkchoose" action="#">
    <!-- Start cycle -->
        <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: Determine if the selection exceeds the maximum limit
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("Sorry, you can only choose" + max + "Items!");
                obj.checked = false;
            }
        }

Logic: Add a click event after each input, and the status of the option box changes to checked with a single click. Convert to 1 with the conditional operator to calculate the number of options selected by the user. If the limit is exceeded, change checked to false.

Think: Type in the /*// line of code and repeat.If there are 10 + options for a question, don't I have to write that many box es?

Optimize: Use a for loop and enclose count of items selected by the statistic user as a separate function

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("Sorry, you can only choose" + ${max_select_item} + "Items!");
            obj.checked = false;
        }
    }

Write it later (TODO)
1. Get user's option information post to server
2. Submit by the user, add a listening event on the submit button to check if the user misses an answer;

2. Get information from the drop-down list (make a year selection card)

Requirements:
1. From 2011 to 2017, the starting year of 2011 is fixed, and 2017 is the current year that needs to be updated continuously;
2. The default option is the current year
3. The year selected by the user (i.e. the information in the list box)

1. Get the current year, js comes with function getFullYear()

var myDate= new Date(); 
var startYear=2011;//The earliest data available
var nowYear=myDate.getFullYear();//Latest year Current year 

2. The drop-down list year is constantly updated, so it cannot be written to death inside a select, it should be loaded dynamically.

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

</select>
js Dynamic loading:
var obj=document.getElementById('select') 
    for (var i=startYear;i<=nowYear;i++) { 
        obj.options.add(new Option(i+"year",i)); }
        /*i,i Corresponding text and value*/} 

3. Select the current year by default

obj.options[obj.options.length-1].selected=true;/*The default is to count from 0*/

4. Get the year value selected by the user

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

Finish.
Oh no, not finished yet.