Jquery实现全选全不选最简单的方式以及获取选中的值

原创于 2023-06-20 17:43:40 发布 · 287 阅读

CC 4.0 BY-SA版权

文章标签：

这段代码展示了如何使用jQuery实现全选主复选框控制子复选框的功能。当点击checkall时，所有name=childcheck的复选框会被选中或取消选中。使用prop方法可以正确处理多次选择，而attr则只能实现一次全选效果。此外，代码还演示了如何获取选中复选框的值并去重。

          $(function() {  
	        $('#checkall').on('click',function(){
	            if(this.checked) {
	                $("input[name='childcheck']").prop('checked',true);
	            }else {
	                $("input[name='childcheck']").prop('checked',false);
	            }
	        });
	     });

注意：若使用attr代替prop，全选效果只能实现一次。

<table>
				<tr>
					<td><input type="checkbox" name="" id="checkall" value="" /></td>
					<td>序号</td>
					<td>用户名称</td>
				</tr>
				<tr th:each="a,aStat:${adminlist}">
					<td><input type="checkbox" name="childcheck" id="${a.id}" value="${a.id}" /></td>
					<td th:text="${aStat.count}">1</td>
					<td th:text="${a.adminname}">超级管理员</td>
				</tr>
			</table>

取值：

           var pList = "";
            $("[name='childcheck']").each(function () {
                if ($(this).is(':checked')) {
                    pList += $(this).val() + ",";
                }
            });
            //去除最后的，
           pList=pList.substr(0,pList.length-1);