复选框相关操作

效果图：

　js模板：

<script id="Countersign_tpl" type="text/template">
        <tr>
            {@each list as it,index}
            {@if index!==0&&index%5===4}
            <td style="">
                <input id="${it.UserID}" value="${it.UserID}" type="checkbox" name="${it.UserID}">
                <label for="${it.UserID}">${it.PersonName}</label>
            </td>
        </tr>
        <tr>
            {@else}
            <td style="">
                <input id="${it.UserID}" type="checkbox" name="${it.UserID}">
                <label for="${it.UserID}">${it.PersonName}</label>
            </td>
            {@/if}
            {@/each}
        </tr>
    </script>　　

　页面html标签：

<table class="font04" border="0">
     <tbody id="Xyhq"></tbody>
</table>

　　

js代码：

第一步：请求数据并渲染模板：

$.ajax({
                type: 'get',
                async:false,
                url: "../../Ashx/GetMeeting.ashx?time="+new Date(),
                //data: { pageSize: Pagination.pageSize, pageIndex: Pagination.pageIndex },
                success: function (result) {
                    var data = JSON.parse(result);//eval("(" + result + ")");
                    //需要会签渲染
                    templateMng.renderCountersign($("#Xyhq"), data.Xyhq);
                    
                }
            })

var templateMng = {
            Countersign_tpl: document.getElementById('Countersign_tpl').innerHTML
            renderCountersign: function (contain, data) {//需要会签
                var list = { list: data };
                var html = juicer(templateMng.Countersign_tpl, list);
                contain.html(html);
                //如果需要加载已选中的人员
                if (dispathid || CachetApplyID) {
                    if (!CachetApplyID) {
                        $("#btnTempSave").css("display", "none");//保存按钮隐藏
                    }
                    //选中已选中的人员
                    if (approve1&&approve1.length > 0) {
                        $("#CheckBox_Countersign").attr("checked", true);
                        var userlist = approve1.split(',');
                        for (var i = 0; i < userlist.length; i++) {
                            var id = "#" + userlist[i];
                            $(id).attr("checked", true);
                        }
                        $("#CachetApply_RoleUserCheckBoxList").css("display", "block");
                    }
                }
            }
        }

　　

　　

生成的html:

<table class="font04" border="0">
        <tbody id="Xyhq">
            <tr>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="1a9d1026-8f0b-4840-a260-dec90296e442" type="checkbox" name="1a9d1026-8f0b-4840-a260-dec90296e442">
                    <label for="1a9d1026-8f0b-4840-a260-dec90296e442">古学进</label>
                </td>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="f148def4-a6c1-4b86-8174-866af9599341" type="checkbox" name="f148def4-a6c1-4b86-8174-866af9599341">
                    <label for="f148def4-a6c1-4b86-8174-866af9599341">赵彤</label>
                </td>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="d471cbc1-cf50-498a-be8a-9bc26d14b248" type="checkbox" name="d471cbc1-cf50-498a-be8a-9bc26d14b248">
                    <label for="d471cbc1-cf50-498a-be8a-9bc26d14b248">刘顺春</label>
                </td>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="6f08a457-9efb-402e-b521-edaed55c6e0d" type="checkbox" name="6f08a457-9efb-402e-b521-edaed55c6e0d">
                    <label for="6f08a457-9efb-402e-b521-edaed55c6e0d">杨桦</label>
                </td>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="4c41c463-961f-4af0-976b-6371eb10ea17" value="4c41c463-961f-4af0-976b-6371eb10ea17" type="checkbox" name="4c41c463-961f-4af0-976b-6371eb10ea17">
                    <label for="4c41c463-961f-4af0-976b-6371eb10ea17">任勇</label>
                </td>
            </tr>
            <tr>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="da203cd1-a0c9-43ac-8f5c-a42aed375d48" type="checkbox" name="da203cd1-a0c9-43ac-8f5c-a42aed375d48">
                    <label for="da203cd1-a0c9-43ac-8f5c-a42aed375d48">彭双伟</label>
                </td>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="895f89fa-8928-4ee0-8fee-c4318820fe80" type="checkbox" name="895f89fa-8928-4ee0-8fee-c4318820fe80">
                    <label for="895f89fa-8928-4ee0-8fee-c4318820fe80">卢山</label>
                </td>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="39d5e514-5a6a-44c8-81f2-26bfefe2cde9" type="checkbox" name="39d5e514-5a6a-44c8-81f2-26bfefe2cde9">
                    <label for="39d5e514-5a6a-44c8-81f2-26bfefe2cde9">寇廷佳</label>
                </td>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="792010eb-fcd3-4949-8f97-67e4be5a6143" type="checkbox" name="792010eb-fcd3-4949-8f97-67e4be5a6143">
                    <label for="792010eb-fcd3-4949-8f97-67e4be5a6143">詹峰</label>
                </td>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="1cb282b7-75e0-404e-8835-032fe7a2b5d4" value="1cb282b7-75e0-404e-8835-032fe7a2b5d4" type="checkbox" name="1cb282b7-75e0-404e-8835-032fe7a2b5d4">
                    <label for="1cb282b7-75e0-404e-8835-032fe7a2b5d4">李先奇</label>
                </td>
            </tr>
            <tr>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="31d9d993-afd0-4e40-a6e9-493a0a0673a3" type="checkbox" name="31d9d993-afd0-4e40-a6e9-493a0a0673a3">
                    <label for="31d9d993-afd0-4e40-a6e9-493a0a0673a3">王冬梅</label>

                </td>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="115a386f-83e0-4d7d-a928-84543bc2fc31" type="checkbox" name="115a386f-83e0-4d7d-a928-84543bc2fc31">
                    <label for="115a386f-83e0-4d7d-a928-84543bc2fc31">高允升</label>
                </td>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="352ea90d-0d96-49d0-b17c-0e034bc6803e" type="checkbox" name="352ea90d-0d96-49d0-b17c-0e034bc6803e">
                    <label for="352ea90d-0d96-49d0-b17c-0e034bc6803e">冉卫东</label>
                </td>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="df24438c-dc5f-4bbe-9166-cf88265de067" type="checkbox" name="df24438c-dc5f-4bbe-9166-cf88265de067">
                    <label for="df24438c-dc5f-4bbe-9166-cf88265de067">靖小伟</label>
                </td>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="497f9340-518a-4d32-a2ab-01f97ff3ee6a" value="497f9340-518a-4d32-a2ab-01f97ff3ee6a" type="checkbox" name="497f9340-518a-4d32-a2ab-01f97ff3ee6a">
                    <label for="497f9340-518a-4d32-a2ab-01f97ff3ee6a">王文革</label>
                </td>
            </tr>
            <tr>
                <td style="background-color: rgb(241, 245, 250);">
                    <input id="b64a4ea9-972e-4252-bb79-62bd35d62d57" type="checkbox" name="b64a4ea9-972e-4252-bb79-62bd35d62d57">
                    <label for="b64a4ea9-972e-4252-bb79-62bd35d62d57">系统管理员</label>
                </td>
            </tr>
        </tbody>
    </table>

　　相关操作：

//需要会签  提交选中的数据
            if ($("#CheckBox_Countersign").attr("checked") != false) {
                var checkedInput = $("#Xyhq input[type='checkbox']:checked");
                var UserIDList = [];
                for (var i = 0; i < checkedInput.length; i++) {
                    UserIDList.push($(checkedInput[i]).attr("name"));
                }
               
                if (UserIDList.length > 0) {
                    var WorkFlowData = {};
                    WorkFlowData.RoleID = ConstSystemRoleId.HeadquartersDefault;
                    WorkFlowData.UserID = UserIDList;
                    WorkFlowData.StepName = "会签";
                    WorkFlowData.StepType = "会签";
                    WorkFlowDataList.push(WorkFlowData);
                }
                CachetApplyEntity.Approver1 = UserIDList.join(",");
            }

　　

$("#CheckBox_Countersign").attr("checked", true); 设置为选中状态
$("#CheckBox_Countersign").attr("checked", false); 设置为未选中状态
$("#CheckBox_Countersign").attr("checked") != “checked” 判断选中状态：选中
$("#CheckBox_Countersign").attr("checked") ==“checked”  判断选中状态：未选中

<input id="CheckBox_Countersign" value="123" type="checkbox" name="123">

var checkedInput = $("#Xyhq input[type='checkbox']:checked"); 获取所有选中的复选框