关于checkbox的js传值和相关转换操作

1.多选框的回显：

    js：$(

        function(){

        var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为checkbox_的所有多选框对象

        var checkArray=${list};//获取多选框需要回显得对应的值集合

        console.info("checkArray=",checkArray);

        for(var i=0;i<checkArray.length;i++){//

                           //获取所有复选框对象的value属性，然后，用checkArray[i]和他们匹配，如果有，则说明他应被选中

                            $.each(checkBoxAll,function(j,checkbox){

                                //获取复选框的value属性

                               var checkValue=$(checkbox).val();

                                if(checkArray[i]==checkValue){

                                    $(checkbox).attr("checked",true);

                              }

                           })

                       }

        });

2.多选框传值到后台:

A.提交表单,使用Action直接获取值

多选框的name一致,传递到后台的值默认是String[]类型,若后台使用String[]类型的变量接收得到的是完整的值(若使用Servlet,对应的API是:request.getParameterValues("checkboxname")),如果使用String接收得到的将是页面上最后一个值(Servlet对应的API:request.getParameter("checkboxname"))

B.使用js获取值,然后ajax提交

比如有下边的html

 

    <input type="checkbox" name="student" value="1" data-age="18" />

    <input type="checkbox" name="student" value="2" data-age="19" />

    <input type="checkbox" name="student" value="3" data-age="20" />

    1)serialize():使用serialize()方法传递多个checkbox选中值

 

    var student = $("input[name='student']:checked").serialize();

    $.ajax({

        url: "your-url",

        type: "post",

        data: student,

        success: function (result){

            //handle

        }

    });

    这样在后台我们使用Request["student"]即可获得checkbox的选中值,得到值如"1,3"。

 

    2)each循环:通过数组参数的方式传递多个checkbox选中值

 

    var student = {'info': []};

    $("input[name='student']:checked").each(function (i, n) {

        student['info'].push(n.value);

    });

    这种写法相当于请求url为'&=info[]=1&info[]=3'这种形式，get方式不支持，后台获取checkbox选中值使用Request["info[]"]，得到如"1,3"。问到到这里已经解决了，但有的朋友可能不仅要获取value，他还想获取checkbox上其他一些附加属性（有时我们要考虑设计是否合理？？）。如他可能想获取checkbox的data-age属性值。在这里我仅给出一个思路：

 

    var student = {'info': []};

    $("input[name='student']:checked").each(function (i, n) {

        //将value age通过"-"拼起来

        student['info'].push(n.value +'-' + $(n).attr('data-age'));

    });

    同样后台使用Request["info[]"]方式得到如"1-18,3-20"的值，到这里你应该会处理了吧，使用Split(',')分隔后，遍历得到的数组，再用Split('-')分隔处理即可。