12

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

任何帮助将不胜感激。

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

4

4 回答 4

19

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

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

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

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

jsFiddle 示例

于 2013-10-03T20:53:23.083 回答
1

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

点击：

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

js：

function toggleCheck(state) {   
    var checkboxes = jQuery(this).closest("form").find("input:checkbox");
    checkboxes.prop('checked',state || false);
}
于 2013-10-03T20:50:40.597 回答
1

答案是：这取决于你的 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);
}

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

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

于 2013-10-03T20:51:54.843 回答
0

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

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

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

在此JSFiddle上详细显示

于 2013-10-03T21:05:55.897 回答