js实现checkbox全选和全不选

最新推荐文章于 2024-04-02 19:39:43 发布

starsky20

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量486

点赞数

文章标签： js

本文链接：https://blog.csdn.net/seashouwang/article/details/47420239

版权

<%@ 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;" οnclick="saveWin();">确认</a>
</p>
</div>
</body>
</html>