js实现checkbox全选和全不选

时间：2021-07-21 09:26:13
<%@ page contentType="text/html;charset=UTF-8" language="java" errorPage="/WEB-INF/jsp/error/error.jsp"%>
<%@ include file="/WEB-INF/jsp/common/tagInclude.jsp"%>
<%@ include file="/WEB-INF/jsp/common/declareInclude.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Content-Type" content="text/html;no-cache; charset=UTF-8">
<title>按钮列表</title>


<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/common/css/common.css"/>
<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/common/css/keshihua.css"/>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/faqi.css" />
  
<script type="text/javascript" src="${pageContext.request.contextPath}/common/jquery/jquery.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath}/common/js/common.js"></script>


<script type="text/javascript">
//提交
function saveWin(){
var buttonIds = "";
var buttonNames = "";
var selectButtonOption = "";
$("input[name='butId']").each(function(i,obj){
if($(obj).is(":checked")){
buttonIds += $(obj).attr("value") +";";
buttonNames += $(obj).attr("title") +";";
selectButtonOption += "<option value='"+$(obj).attr("value")+"'>"+$(obj).attr("title")+"</option>";
}
});

if(buttonIds.lastIndexOf(";")>=0){
buttonIds = buttonIds.substring(0,buttonIds.lastIndexOf(";"));
buttonNames = buttonNames.substring(0,buttonNames.lastIndexOf(";"));
}

$("#${param.buttonId}", parent.document).val(buttonIds);
$("#${param.buttonName}", parent.document).val(buttonNames);
var selectButton = "${param.selectButton}";
if(selectButton != undefined && selectButton !=null && selectButton !="" ){
$("#${param.selectButton}", parent.document).html(selectButtonOption);
}
window.parent.portal.close();
}
</script>
<script type="text/javascript">
$(function(){
$("#selectAll").click(function(){
if($(this).is(":checked")){
$("input[name='butId']").each(function(i,obj){
this.checked=true;
});
}else{
$("input[name='butId']").each(function(i,obj){
this.checked=false;
});
}
});

$("input[name='butId']").click(function(){
if($(this).is(":checked")){
}else{
this.checked=false;
}
});

});
</script>
</head>
<body  style="background-color: rgb(255, 255, 255); overflow-x:none; overflow-y:auto;">
<div class="tanchu_con"  >
<div class="ml10 fl" style="overflow-y:auto;overflow-x:hidden; width: 500px; height: 340px;">
<form name="listForm" method="post">
<table class="faqi_tableStyle"style="width: 480px; text-align: left">
<tr >
  <th  class="thStyle" style="text-align: left;">
  <input type="checkbox" id="selectAll" style="margin-left: 10px;">
    </th>
  <th  class="thStyle" style=" text-align: left;">
  <strong>按钮名称</strong>
    </th>
    <th class="thStyle" style="text-align: left;">
  <strong>按钮编码</strong>
    </th>
   </tr>
<c:forEach var="item" items="${buttonList}">
<tr>
<td class="wp70">
  <input type="checkbox" id="butId" name="butId" <c:if test="${item.isChecked eq '1'}">checked='checked'</c:if>
  title="${item.buttonName}" class="ml10" style="margin-top: -5px;" value="${item.id}">
    </td>
  <td class="wp70">
    ${item.buttonName}
    </td>
    <td class="wp70">
    ${item.flag}
    </td>
    </tr>
    </c:forEach>
</table>  
</form>
  </div>
  <p class="width100 mt15 ml10 fl">
  <a class="leader_close btn_white txtc" style="width:200px;margin:0 auto; float: center; cursor: pointer;" onclick="saveWin();">确认</a>
</p> 
</div>
</body>
</html>
标签：

相关文章