我有这个js/jquery脚本,我写了一个表单来检查所有Checbox。它运行良好,但这会检查页面上的所有复选框,无论它们是表单包装器。
这是函数
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中的所有复选框,所有复选框都得到选中,包括Form2中的复选框。
有没有办法在不引入表单 ID 或名称的情况下将它们分开?..这是因为我已经在生产代码中广泛使用了它,重写所有内容都会很麻烦。
任何帮助将不胜感激。
附言值得注意的是,全选和取消全选都在两个表单中,并且两个表单都在同一页面上。
假设您的选择/取消选择链接位于表单内,请执行以下操作:
function toggleCheck(state,elem) {
jQuery(elem).closest("form").find("input:checkbox").prop('checked', state);
}
并将您的链接 JS 更改为(传递适当的 true/false 参数):
onclick="javascript:toggleCheck(false,this);"
js小提琴示例
答案是:这取决于你的 DOM。如果你的<a>
元素在表单中,你可以使用 $.closest():
function toggleCheck(state) {
$(this)
.closest("form")
.find("input[type=checkbox]")
.prop('checked', state);
}
我稍微修改了您的代码以提高可读性、性能(请参阅有关 :checkbox 选择器的其他说明)并更像"jQuery"。
[编辑]阅读评论后,我重写了函数,仍然假设<a>
元素在<form>
内,这次也使用工作 jsFiddle:
function toggleCheck(state) {
$(document).find(event.target)
.closest("form")
.find("input[type=checkbox]")
.prop('checked', state);
}
[编辑2]为了完整起见,我对元素顺序的评论(jsFiddle):
function toggleCheck(state) {
var pos = $(document).find(event.target.localName + "." + event.target.className).index(event.target);
var $form = $($(document).find("form").get(Math.floor(pos/2)));
$form
.find("input[type=checkbox]")
.prop('checked', state)
}
[编辑3]最后一次编辑,我保证。这次我忽略默认回调并做我自己的事情:
function toggleCheck(state) {
// either write the s tate now in a variable for
// the next callback
}
$(document).on("click", "a.btn", function(e) {
var $ele = $(this);
// or do some string exploration
var toggle = $ele.attr("onclick").indexOf("true") > -1;
var pos = $(document).find("a.btn").index($ele);
var $form = $($(document).find("form").get(Math.floor(pos/2)));
$form
.find("input[type=checkbox]")
.prop('checked', toggle);
});
无需触摸任何东西即可工作。但我不想使用这个。;-)
.nearest 方法将执行您想要的操作。
点击:
onclick="toggleCheck.call(this,true);"
.js:
function toggleCheck(state) {
var checkboxes = jQuery(this).closest("form").find("input:checkbox");
checkboxes.prop('checked',state || false);
}
您也可以根据表单元素的操作将数据目标应用于锚点和评估:
... data-target='myaction-page' ...
... checkboxes[i].form.getAttribute( 'action' ) ...
在此 JSFiddle 上详细显示