jsp页面动态表格及选中checkbox后联动其他复选框

业务说明:

用户勾选服务后,可以自动勾选下个页面的复选框。

此处表格是动态表格

此处表格为写死的

解决代码

动态表格代码

<table style="font-size: 17px;" border="1">
    <tbody>
    <tr class="firstRow">
        <td style="display:none;"></td>
        <td width="20%" valign="top" style="word-break: break-all; text-align: center">服务人群</td>
        <td width="40%" valign="top" style="word-break: break-all;text-align: center">服务内容</td>
        <td width="20%" valign="top" style="word-break: break-all;text-align: center">选择服务项目</td>
        <td width="20%" valign="top" style="word-break: break-all;text-align: center">备注</td>
    </tr>
    <c:forEach var="item" items="${serviceTable1}" varStatus="status">
        <tr>
            <td style="display:none;"><input type="hidden" value="${item.id}" ></td>
            <td  width="20%" >${item.targetCrowd}</td>
            <td width="40%">${item.content}</td>
            <td width="20%"  class="jt-check-td"><br/> <input  type="checkbox" name="checkItem" οnchange="checkMark('markCheck_'+${ status.index},$(this))"/></td>
            <td width="20%" ><input class="jt-td-input" type="text"/></td>
        </tr>
    </c:forEach>
    
    </tbody>
</table>

代码说明:

1、serviceTable1为后台返回数据

2、checkMark()事件用来触发复选框勾选事件

标记页代码

这里id是复选事件需要,name是为了获取复选框的值。

//获取标记复选框的值
var markValue = [];//定义一个空数组
$("input[name='markValue1']:checked").each(function(i){//把所有被选中的复选框的值存入数组
    markValue[i] =$(this).val();
});
$("#markValue").val(markValue.toString());

动态选中代码

//checkbox动态选中或取消
function checkMark(markIndex,item){
    if (item.is(":checked")== true) {
        //选中触发事件
        $("#"+markIndex).attr("checked",true);
    } else {
        //取消选中触发事件
        $("#"+markIndex).attr("checked",false);
    }
}

猜你喜欢

转载自blog.csdn.net/KeepLearnZhangXiaoBo/article/details/114969353