今天写表单在多选框全选的逻辑功能上遇到了一些问题,不过还好解决了,记录一下逻辑关系
function selectEvent(){
var selectEvent = $('input[name=selectEvent]');
console.log(selectEvent);
var flag = false;
for(var i = 0;i<selectEvent.length;i++){
var event = selectEvent[i];
if($(event).attr("checked") != "checked"){
flag = false;
break;
}else{
flag = true;
continue;
}
}
if(flag){
$('input[name=selectAll]').attr('checked', true);
}else{
$('input[name=selectAll]').attr('checked', false);
}
}
function selectAll(){
if($("#selectAll").attr("checked") == "checked"){
$('input[name=selectEvent]').attr('checked', true);
}else{
$('input[name=selectEvent]').attr('checked', false);
}
}
上面为JS中的全选逻辑关系
下面为页面的多选框全选
<th><input type="checkbox" id="selectAll" name="selectAll" οnclick="selectAll(this);" >全选</input></th>
<th>大事记标题</th>
<th>大事记类型</th>
<th>发布者</th>
<th>发布时间</th>
<%-- <shiro:hasPermission name="event:event:edit"> --%><th>操作</th><%-- </shiro:hasPermission> --%>
</tr>
</thead>
<tbody>
<c:forEach items="${page.list}" var="event" varStatus="vs">
<tr>
<td><input type="checkbox" value="${event.id}" id="selectEvent" name="selectEvent" οnclick="selectEvent(this);"></td>