繁体   English   中英

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

[英]Get Closest Form to an Element in jQuery

我有这个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都在两种形式中,两种形式都在同一页面上。

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

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

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

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

jsFiddle例子

.closest方法会做你想要的。

的onclick:

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

JS:

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

答案是:它取决于你的DOM。 如果<a>元素在表单内,则可以使用$ .closest()

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

我略微改变了你的代码以提高可读性和性能(参见关于:checkbox选择器的附加说明)并且更像是“jQuery”。

[edit]阅读完评论之后,我重写了这个函数,仍假设<a>元素在<form> ,这次也是一个有效的jsFiddle

function toggleCheck(state) {
    $(document).find(event.target)
        .closest("form")
        .find("input[type=checkbox]")
        .prop('checked', state);
}

[edit2]并且为了完整性,关于我对元素顺序的评论( 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)
}

[edit3]最后一次编辑,我保证。 这次我忽略了默认的回调并做了我自己的事情

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

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

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

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

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

在这个JSFiddle上详细显示

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM