这是我的第一个JSP页面 我想使用Ajax创建一个Multiple checkbox Filter页面我的问题是，当我检查多个复选框时，它可以替换之前的复选框值我附加了3个文件...所以请给我解决这个问题非常感谢。< /强>
<%--
Document : Filter
Created on : Jan 14, 2018, 3:16:01 PM
Author : Lenovo
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page language="java" %>
<%@page import="java.sql.*" %>
<%@page import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="Bootstrap/bootstrap.css"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>Filter</title>
<style>
header
{
background-color: lightblue;
height: 100px;
}
li
{
list-style-type: none;
}
#remove
{
display: none;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<header>
</header>
</div>
</div>
<br>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="thumbnail" style="padding:20px;">
<h4>BRAND</h4>
<ul>
<%
String bname=null;
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/sample","root","root");
Statement st=con.createStatement();
ResultSet rs;
rs=st.executeQuery("SELECT * FROM brands ORDER BY b_name");
int a=1;
while(rs.next())
{
bname=rs.getString("b_name");
%>
<li><input class="brand" id="brand<%=a++%>" type="checkbox" name="chk" value="<%=bname%>" /><%=bname%></li>
<%
}
}
catch(Exception e)
{
out.println(e);
}
%>
</ul>
<hr>
<h4>RAM</h4>
<ul>
<%
String ram=null;
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/sample","root","root");
Statement st=con.createStatement();
ResultSet rs;
rs=st.executeQuery("SELECT * FROM ram ORDER BY ram");
while(rs.next())
{
ram=rs.getString("ram");
%>
<li><input type="checkbox" name="chk" value="<%=ram%>" /><%=ram%></li>
<%
}
}
catch(Exception e)
{
out.println(e);
}
%>
</ul>
<hr>
<h4>PRICE</h4>
<ul>
<li><input id="price" type="range" min="3000" max="100000" step="1000" value="3000" /></li>
<div id="showPrice">
</div>
</ul>
</div>
</div>
<div class="col-sm-9" id="load">
<span id="remove">
<a href="" class="btn btn-primary" style="background-color: white; color: black;">Clear filter <i class="fa fa-times"></i></a>
</span>
<br><br>
<div id="filter">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="Bootstrap/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="Bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="FilterJS.js"></script>
</body>
</html>
这是我的Jquery＆amp; Ajax页面
$(document).ready(function()
{
$('.brand').on('change',function()
{
if($(this).is(":checked"))
{
var brand=$(this).val();
$.ajax({
url:"FilterAjaxDB1.jsp",
method:"post",
data:{brand:brand},
success:function(data)
{
$('#filter').html(data);
$('#remove').css({"border-radius":"40px"}).show().fadeIn('fast');
$('#remove').click(function ()
{
$('.brand').prop("checked",false);
});
}
});
}
else
{
$('#filter').html("Not");
$('#remove').hide().fadeOut('fast');
}
});
});
这是我的AjaxDB文件
<%--
Document : FilterAjaxDB1
Created on : Jan 14, 2018, 5:09:48 PM
Author : Lenovo
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page language="java" %>
<%@page import="java.util.*" %>
<%@page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="Bootstrap/bootstrap.css"/>
<title>JSP Page</title>
</head>
<body>
<div class="thumbnail">
<%
String bname=request.getParameter("brand");
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/sample","root","root");
Statement st=con.createStatement();
ResultSet rs;
rs=st.executeQuery("SELECT * FROM mobiles WHERE b_name='"+bname+"'");
while(rs.next())
{
String name=rs.getString("m_name");
String ram=rs.getString("ram");
int p=rs.getInt("price");
out.print(name+"<br>");
out.print(ram+"<br>");
out.print(p+"<br>");
}
}
catch(Exception e)
{
out.print(e);
}
%>
</div>
<script type="text/javascript" src="Bootstrap/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="Bootstrap/bootstrap.js"></script>
</body>
</html>
答案 0 :(得分：0)
我想使用Ajax创建一个Multiple checkbox Filter页面我的问题是，当我选中多个复选框时，它可以替换以前的复选框值
你应该知道一些事情，在Multiple复选框中，如果你选择多个，你只能通过checkbox.value获得一个值。
如果您想获取所有值，您必须使用for循环检查所有复选框，如果您正在检查的那个是否已选中