欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

多选框使用记录

程序员文章站 2022-03-07 14:26:06
...

项目中需要添加多选框选择功能,遇到一下困难,记录一下

1、传递多选框的值给后台

虽然Java后台可以通过request.getParameterValues()获取多选框的值,但是该方法返回的是一个字符串数组,而我在项目中并不想获取字符串数组,只想要字符串。此时可以使用以下js代码实现

var channel = "";
$('input:checkbox:checked').each(function (index, item) {
    channel+=$(this).val()+",";
});
channel = channel.substr(0,channel.length-1);

2、从数据库中获取数据为多选框进行赋值

对某一条数据进行编辑时,获取数据并赋值时在多选框方面需要进行特殊处理。js代码如下:

var channels= new Array();
channels=data1[0].channel.split(",");
var $input=$("input[name='channel']");
for (var i = 0; i < channels.length; i++) {
    for (var j = 0; j < $input.length; j++) {
        var inputVal=$input.eq(j).val();
        if (inputVal==channels[i]) {
            $input.eq(j).attr('checked',true);//让其为选中
        } 
    }
}

3、全选全不选功能

需要一个点击事件进行触发全选全不选功能

function choose(){
    var ch=$("input[name='channel']");
    if($("#allChannel")[0].checked==true){
        for(var i=0;i<ch.length;i++){
            ch[i].checked=true;
        }
    }else{
        for(var i=0;i<ch.length;i++){
            ch[i].checked=false;
        }
    }
}