多个复选框过滤器在 ajax 中无法正常工作......！答案

【问题标题】：Multiple Checkbox filter not working properly in ajax...!多个复选框过滤器在 ajax 中无法正常工作......！
【发布时间】：2018-01-23 12:17:45
【问题描述】：

这是我的第一个 JSP 页面我想使用 Ajax 创建一个多复选框过滤器页面，我的问题是，当我选中多个复选框时，它可以替换以前的复选框值，我在其中附加了 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 & 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>

【问题讨论】：

好吧，您只使用一个复选框值，因此您需要查找所有复选框值。根据您希望将其发送到服务器的方式来确定解决方案。

标签： javascript java jquery html ajax

【解决方案1】：

我想使用 Ajax 创建一个多复选框过滤器页面，我的问题是当我选中多个复选框时，它可以替换以前的复选框值

有一点你应该知道，在Multiple checkbox中，如果你选择多个，checkbox.value只会得到一个值。

如果你想得到所有的值，你必须使用for循环来检查所有的复选框，如果你正在检查的那个被选中了

【讨论】：