使用Jquery获取thymeleaf中checkbox的值

超、凢脫俗 2023-10-18 15:58 108阅读 0赞

## 场景 ##

使用thymeleaf模板，需要在列表展示中添加多选框，实现勾选后能获取到勾选的数据的属性。

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

## 实现 ##

thymeleaf页面代码

<button id="printBtn"  class="btn btn-info  mb_1em" type="button" onclick="return printDetails()"><i class="fa fa-paste"></i> 打印</button>
                <table id="wmsInOrderDetail_table_id"  class="table  table-bordered hover" style="width:100%">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>托盘编号</th>
                        <th>物料编号</th>
                        <th>物料名称</th>
                        <th>数量</th>
                        <th>供应商批次</th>
                        <th>生产日期</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody >
                    <tr th:each="orderlist:${wmsReceiveOrderDetailsVOList}"  >
                        <td>
                        <input type="checkbox"
                               class="ads_Checkbox"
                               th:text="${orderlist.id}"
                               th:value="${orderlist.id}" name="checkedid"/>
                        </td>
                        <td th:text="${orderlist.salverCode}"></td>
                        <td th:text="${orderlist.materielId}"></td>
                        <td th:text="${orderlist.materielName}"></td>
                        <td th:text="${orderlist.num}"></td>
                        <td th:text="${orderlist.supplierBatch}"></td>
                        <td th:text="${#dates.format(orderlist.productDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td th:text="${orderlist.statusName}"></td>
                    </tr>
                    </tbody>
                </table>

选中数据后，点击打印按钮，来到js中的方法。

function printDetails(){
        debugger
        var checkID = [];//定义一个空数组
        $("input[name='checkedid']:checked").each(function(i){//把所有被选中的复选框的值存入数组
            checkID[i] =$(this).val();
        console.log(checkID);
        });
       
    }

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190323133655619.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70