在jQuery中获取最接近元素的形式

Posted 2023-05-08

【中文标题】在jQuery中获取最接近元素的形式

【英文标题】：Get Closest Form to an Element in jQuery

【发布时间】：2013-10-10 17:24:55

【问题描述】：

我编写了这个 js/jquery 脚本来检查表单中的所有复选框。它工作得很好，但这会检查页面上的所有复选框，而不管它们是什么表单包装器。

这里是函数

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 或名称的情况下将它们分开？..这是因为我在生产代码中广泛使用它，并且全部重写会很麻烦。

任何帮助将不胜感激。

P.S 值得注意的是，全选和全选都在两个表单中，并且两个表单都在同一个页面上。

【问题讨论】：

表格中是否有“全选”和“取消全选”复选框？

为什么会有 if 语句？ checkboxes.prop('checked',state);

@JasonP 是的，全选和全选都在这两种形式中......他们应该根据他们所属的形式进行选择

@KevinB 除非状态未定义

@VyrenMedia 他说它们是不必要的。 if (someBool == true) doSomething(true); else if (someBool == false) doSomething(false); 与 doSomething(someBool); 相同

【参考方案1】：

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

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

并将您的链接 JS 更改为（传递适当的 true/false 参数）：

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

jsFiddle example

【讨论】：

必须更新锚元素会带来麻烦，因为我以这种方式设置了 50 多个页面...感谢您的回答！

如果你不能更新锚元素，那么你就不走运了。如果不更新它，就无法自动定位元素（在所有浏览器中）。这就是您（或编写代码的人）使用内联事件得到的结果，即难以/不可能维护的代码。

@KevinB - 我们可以jQuery(event.target).closest("form").find("input:checkbox").prop('checked', state);吗？

event 是否在全球所有浏览器中定义？我知道它可以在 Chrome 中运行，但我怀疑它是否总是如此。

@VyrenMedia 有一些编辑器可以让您轻松地将 x 替换为 y，例如 notepad++。您可以使用正则表达式标志在一次扫描中将所有出现的toggleCheck\((true|false)+\) 替换为toggleCheck($1,this)，并立即替换特定目录下的文件。它甚至可以让您过滤到仅匹配特定模式的文件。

【参考方案2】：

答案是：这取决于您的 DOM。如果您的<a> 元素在表单内，您可以使用$.closest():

function toggleCheck(state) 
    $(this)
        .closest("form")
        .find("input[type=checkbox]")
        .prop('checked', state);

我稍微修改了您的代码以提高可读性和性能（请参阅有关:checkbox selector 的附加说明）并更像“jQuery”。

[编辑] 在阅读了 cmets 之后，我重写了函数，仍然假设 <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] 最后一次编辑，我保证。这次我忽略了默认回调，做my own thing：

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);
);

无需触摸任何东西即可工作。但我不想用这个。 ;-)

【讨论】：

@VyrenMedia 不是，如果它在 <form> 元素内，那么一切都应该按原样工作。如果不是，则必须稍微作弊（假设第一个 <a> 元素切换第一个 <form> 等等……

@nietonfir this 在这种情况下引用了窗口，并且窗口肯定不在表单内。

@KevinB 该死的，你是对的。但是他不能使用toggleCheck，他可以简单地全局监听click事件并相应地切换（假设第一个<a>元素切换第一个<form>等等......），你不觉得吗？跨度>

@nietonfir 刚刚尝试了您的代码，但没有成功...我非常感谢您的贡献。

对，这只适用于在窗口上定义了event 的浏览器，firefox 不是其中之一。

【参考方案3】：

.closest 方法会做你想做的事。

点击：

onclick="toggleCheck.call(this,true);"

js:

function toggleCheck(state)    
    var checkboxes = jQuery(this).closest("form").find("input:checkbox");
    checkboxes.prop('checked',state || false);

【参考方案4】：

您还可以根据表单元素的操作将数据目标应用于锚点和评估：

... data-target='myaction-page' ...

... checkboxes[i].form.getAttribute( 'action' ) ...

详细显示在这个JSFiddle

【讨论】：

如果我更新所有页面上的所有锚标记，会阻止我按照其他答案的建议更新 onclick 属性...谢谢。