iterate+struts+实现复选框

 又是对老项目进行需求的开发，好烦。。。。。。。。。。。。。。。。。。

老项目页面使用的 struts 标签进行数据的展示和处理，但是需求要求将原先的输入框，变为下拉框选择，但是由于该输入框是多选的，如果使用下拉多选框的话，需要使用 Ctrl + 鼠标点击，但是用户使用过程中，不可能按照你的要求去做，

另一方面由于该数据框的选项比较的少，4 个，使用复选框不是很麻烦，如果复选的选项过多的话，需要使用弹窗的方式进行选择。 

 

<div>
    <%int t=0; %>
    <logic:present name="" scope="">
        <logic:iterate id="" name="" type="">
            
            <!-- 这里处理一下具体展示的数据信息-->
            
            
            <%t++; %>
        </logic:iterate>
    </logic:present>
</div>

 通过动态的 属性标签的id 去确定是对展示数据的哪一行进行操作。

这个是在新增行的时候使用的，在全选复选框后面添加一个 οnchange="quanxuan('"+number+"')"   事件

变量值，一定不能放到双引号里面，且需要使用 ' 单引号将变量引住。

function quanxuan(number) {
    /* 判断该id 的复选框是否被选中, 做全选的时候使用 */
    var checked = $("#id"+number).is(":checked");
    if (checked) {
        //由于每一行都存在一个复选框，所以这里不能使用 按照name 属性进行设置，通过父属性唯一的id 来确定是哪一行的复选框
        $("#ch" + number).children().children().attr("checked", "true");
    } else {
        $("#ch" + number).children().children().removeAttr("checked", "true");
    }
    
}

 

这个是在数据展示的时候使用的

var val = "苹果,香蕉,橘子";
var split = val.split(",");
/* 在数据加载的时候，通过这种方式，将后天传递过来的数据进行选中*/
for (var i = 0; i < split.length; i++) {
    var string = split[i];
    switch (string) {
        case '苹果':
            $("#shuiGuo" + number).children().children("input[value='苹果']").attr("checked", "checked");
            break;
        case '香蕉':
            $("#shuiGuo" + number).children().children("input[value='香蕉']").attr("checked", "checked");
            break;
        case '橘子':
            $("#shuiGuo" + number).children().children("input[value='橘子']").attr("checked", "checked");
            break;
    }
}

在进行数据点击修改的时候进行使用。 

// 苹果复选框的点击操作，其他的复选框也需要进行这样的操作，尝试过将 fucntion() 抽取出来，但是这样一来页面的数据展示会出现问题，
$("#ch" + number).children().children("input[value='苹果']").click(function () {
    var arrShuiGuo = "";
    //获得该行复选框所有的选中数据
    var jQuery = $("#ch"+number).children().children(":checkbox:checked");
    jQuery.each(function () {
        var val1 = $this.val();
        arrShuiGuo += val1;
        arrShuiGuo += ",";
    });
    // 将值赋给 隐藏的输入框里面，后台获取数据的时候，从该输入框获得数据，而不用从复选框获得数据，
    //看了一下复选框传递的数据，将该列所有选中的数据形成了一个数组，无法分清是哪一行的数据。
    $("#" + number).attr("value", arrShuiGuo);
    
});