我正在为我的网页上要过滤的产品创建过滤器选项。我需要做的是根据我需要的大小单击复选框将特定复选框的值插入到php变量中而不重新加载页面。据我所知，如果不使用Ajax就不可能，因为我对Ajax不熟悉，所以我无法解决这个问题。
Php代码：
<?php
$importeddata="//I want the checkbox value to be imported here";
include "connect_db.php";
$result = mysql_query("SELECT * FROM bangles WHERE stat!='enable' ORDER BY product_id DESC");
while($data=mysql_fetch_array($result)):
?>
以下是复选框代码，您也可以查看 JSFIDDLE ：
#sizetable
{
margin-left:-10px;
margin-top:0px;
padding:5px;
}
#sizetable th
{
padding:5px;
text-align:left;
}
#sizetable label
{
cursor:pointer;
}
.s2, .s4, .s6, .s8
{
width: 38px;
height: 38px;
position: relative;
margin: 0px auto;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.s10
{
width: 45px;
height: 38px;
position: relative;
margin: 0px auto;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.s2 label, .s4 label, .s6 label, .s8 label
{
width: 30px;
height: 30px;
position: absolute;
top: 4px;
left: 4px;
cursor: pointer;
background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.s10 label
{
width: 37px;
height: 30px;
position: absolute;
top: 4px;
left: 4px;
cursor: pointer;
background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.s2 label:before
{
content:'2.2';
color: white;
position: absolute;
left:5px;
top:0px;
z-index: 0;
font: 14px/26px Arial, sans-serif;
font-weight: bold;
}
.s4 label:before
{
content:'2.4';
color: white;
position: absolute;
left:5px;
top:0px;
z-index: 0;
font: 14px/26px Arial, sans-serif;
font-weight: bold;
}
.s6 label:before
{
content:'2.6';
color: white;
position: absolute;
left:5px;
top:0px;
z-index: 0;
font: 14px/26px Arial, sans-serif;
font-weight: bold;
}
.s8 label:before
{
content:'2.8';
color: white;
position: absolute;
left:5px;
top:0px;
z-index: 0;
font: 14px/26px Arial, sans-serif;
font-weight: bold;
}
.s10 label:before
{
content:'2.10';
color: white;
position: absolute;
left:5px;
top:0px;
z-index: 0;
font: 14px/26px Arial, sans-serif;
font-weight: bold;
}
.s2 label:after
{
content:'2.2';
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
color:white;
text-align:center;
background: #27ae60;
background: -webkit-linear-gradient(top, #27ae60 0%, #145b32 100%);
background: linear-gradient(to bottom, #27ae60 0%, #145b32 100%);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
opacity: 0;
font: 14px/26px Arial, sans-serif;
font-weight: bold;
}
.s4 label:after
{
content:'2.4';
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
color:white;
text-align:center;
background: #27ae60;
background: -webkit-linear-gradient(top, #27ae60 0%, #145b32 100%);
background: linear-gradient(to bottom, #27ae60 0%, #145b32 100%);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
opacity: 0;
font: 14px/26px Arial, sans-serif;
font-weight: bold;
}
.s6 label:after
{
content:'2.6';
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
color:white;
text-align:center;
background: #27ae60;
background: -webkit-linear-gradient(top, #27ae60 0%, #145b32 100%);
background: linear-gradient(to bottom, #27ae60 0%, #145b32 100%);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
opacity: 0;
font: 14px/26px Arial, sans-serif;
font-weight: bold;
}
.s8 label:after
{
content:'2.8';
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
color:white;
text-align:center;
background: #27ae60;
background: -webkit-linear-gradient(top, #27ae60 0%, #145b32 100%);
background: linear-gradient(to bottom, #27ae60 0%, #145b32 100%);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
opacity: 0;
font: 14px/26px Arial, sans-serif;
font-weight: bold;
}
.s10 label:after
{
content:'2.10';
width: 37px;
height: 30px;
position: absolute;
top: 0;
left: 0;
color:white;
text-align:center;
background: #27ae60;
background: -webkit-linear-gradient(top, #27ae60 0%, #145b32 100%);
background: linear-gradient(to bottom, #27ae60 0%, #145b32 100%);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
opacity: 0;
font: 14px/26px Arial, sans-serif;
font-weight: bold;
}
.s2 label:hover::after, .s4 label:hover::after, .s6 label:hover::after, .s8 label:hover::after, .s10 label:hover::after
{
opacity: 0.3;
}
.s2 input[type=checkbox], .s4 input[type=checkbox], .s6 input[type=checkbox], .s8 input[type=checkbox], .s10 input[type=checkbox]
{
visibility: hidden;
}
.s2 input[type=checkbox]:checked + label:after, .s4 input[type=checkbox]:checked + label:after, .s6 input[type=checkbox]:checked + label:after, .s8 input[type=checkbox]:checked + label:after, .s10 input[type=checkbox]:checked + label:after
{
opacity: 1;
}<table border="0" id="sizetable">
<tr>
<th>
<div class="s2">
<input type="checkbox" value="twopointtwo" id="s2" name="size" />
<label for="s2"></label>
</div>
</th>
<th>
<div class="s4">
<input type="checkbox" value="twopointfour" id="s4" name="size" />
<label for="s4"></label>
</div>
</th>
<th>
<div class="s6">
<input type="checkbox" value="twopointsix" id="s6" name="size" />
<label for="s6"></label>
</div>
</th>
<th>
<div class="s8">
<input type="checkbox" value="twopointeight" id="s8" name="size" />
<label for="s8"></label>
</div>
</th>
<th>
<div class="s10">
<input type="checkbox" value="twopointten" id="s10" name="size" />
<label for="s10"></label>
</div>
</th>
</tr>
</table>
答案 0 :(得分：2)
您需要为所有复选框附加一个点击监听器：
$('input[type=checkbox]').on('click', function() {
// here grab all checked checkboxes, construct a string or JSON object and make your ajax call with the checkboxes states...
$.ajax({
url:...
...
success: function(data) {
// here process your results, remove previous products, insert new
}
});
});
您还可以考虑加载所有产品（如果不是太多）并使用客户端库（例如不错的Isotope）进行过滤。
祝你好运修改
我没有时间写下小提琴，但this可能会有所帮助，它几乎就是你想做的事情。阅读有关服务器端/客户端的信息，如Hanoncs建议，阅读有关AJAX的信息（简单地说：从服务器获取信息 - 例如来自数据库的PHP值 - 无需重新加载页面，并使用这些值修改页面 - 例如替换未过滤的产品列出新的），Javascript，JSON，jQuery。
答案 1 :(得分：0)
查看fiddle，你必须在里面指定你的php脚本的url，然后在你的php中使用它来从POST数组中获取数据
$importeddata = $_POST['selectedSize'];