在jQuery中获取最接近元素的表单

Question

我有这个js/jquery脚本,我写了一个表格检查所有checboxes.它运行良好,但这会检查页面上的所有复选框,而不管它们是什么样的表单包装器.

这是功能

function toggleCheck(state)
{   var checkboxes = jQuery("form input:checkbox");
if(state==true){checkboxes.prop('checked',true); }
if(state==false){ checkboxes.prop('checked',false); }
}

用法

<a id="check" href="#" onclick="javascript:toggleCheck(true);" class="btn">Select All</a>
<a id="uncheck" href="#" onclick="javascript:toggleCheck(false);" class="btn">Deselect All</a>

请注意这很好,但我的问题是,如果我有

 <form action="myaction-page">//some form elements and checkboxes </form>

和

<form action="myaction-page-2">//some form elements and checkboxes </form>

然后我点击form1中的check all链接,所有复选框都会被检查,包括form2中的那些.

有没有办法在不引入表单ID或名称的情况下将它们分开？这是因为我在生产代码中广泛使用它并重写所有都会有麻烦.

任何帮助将不胜感激.

PS值得注意的是,select all和deselect all都在两种形式中,两种形式都在同一页面上.

Answer 1

假设您的选择/取消选择链接在表单内,请执行以下操作:

function toggleCheck(state,elem) {
    jQuery(elem).closest("form").find("input:checkbox").prop('checked', state);
}

并将您的链接JS更改为(传递适当的true/false参数):

onclick="javascript:toggleCheck(false,this);"

jsFiddle例子