对于一个项目,我想实现一个带有多个复选框的漂亮过滤机制。我得到了正确的复选框以及一个jQuery函数,以便在选中复选框时自动POST表单。
现在我想在复选框上方添加一个“全选”复选框,但我似乎无法找到正确的方法。我已经为(某些)类似的问题尝试了十几个解决方案,但我无法让它正常工作并保持一致。
HTML部分是这样的:
<form action="<?php $_SERVER['PHP_SELF']?>" method="post">
<input type="checkbox" /> Select All colors<br/>
<label> <input type="checkbox" name="color[]" value="yellow"> Yellow</label><br/>
<label> <input type="checkbox" name="color[]" value="blue"> Blue</label><br/>
<label> <input type="checkbox" name="color[]" value="red"> Red</label><br/>
<label> <input type="checkbox" name="color[]" value="green"> Green</label><br/><br/>
<input type="checkbox" /> Select All brands<br/>
<label> <input type="checkbox" name="brand[]" value="Nike"> Nike</label><br/>
<label> <input type="checkbox" name="brand[]" value="Adidas"> Adidas</label><br/>
<label> <input type="checkbox" name="brand[]" value="SomeBrand"> SomeBrand</label><br/>
<label> <input type="checkbox" name="brand[]" value="SomeOtherBrand"> SomeOtherBrand</label><br/>
</form>
我用来在复选框上每次点击时发布表单的jQuery部分(还不够):
$('input:checkbox:').live('click',function() {
$(this).closest('form').submit();
});
我现在的问题是,我需要为jQuery部分确保其正常工作? 我希望能够单击标签以取消选择该组中的所有内容,并仅选择该复选框。它还需要POST表单中的数组值。最后,如果手动检查所有复选框,则还必须检查“全选”。
希望有人可以帮助我,因为我长期坚持这个......
答案 0 :(得分:0)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#colorall").click(function()
{
var checked_status = this.checked;
$(".color").each(function()
{
this.checked = checked_status;
});
});
$(".color").click(function(){
if($(".color").length == $(".color:checked").length) {
document.getElementById("colorall").checked = true;
} else {
$("#colorall").removeAttr("checked");
}
});
$("#brandall").click(function()
{
var checked_status = this.checked;
$(".brand").each(function()
{
this.checked = checked_status;
});
});
$(".brand").click(function(){
if($(".brand").length == $(".brand:checked").length) {
document.getElementById("brandall").checked = true;
} else {
$("#brandall").removeAttr("checked");
}
});
});
</script>
<form action="<?php $_SERVER['PHP_SELF']?>" method="post">
<input type="checkbox" id="colorall" /> Select All colors<br/>
<label> <input type="checkbox" name="color[]" value="yellow" class="color"> Yellow</label><br/>
<label> <input type="checkbox" name="color[]" value="blue" class="color"> Blue</label><br/>
<label> <input type="checkbox" name="color[]" value="red" class="color"> Red</label><br/>
<label> <input type="checkbox" name="color[]" value="green" class="color"> Green</label><br/><br/>
<input type="checkbox" id="brandall"/> Select All brands<br/>
<label> <input type="checkbox" name="brand[]" value="Nike" class="brand"> Nike</label><br/>
<label> <input type="checkbox" name="brand[]" value="Adidas" class="brand"> Adidas</label><br/>
<label> <input type="checkbox" name="brand[]" value="SomeBrand" class="brand"> SomeBrand</label><br/>
<label> <input type="checkbox" name="brand[]" value="SomeOtherBrand" class="brand"> SomeOtherBrand</label><br/>
</form>