在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例子

Answer 2

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

Answer 3

答案是：它取決於你的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);
});

無需觸摸任何東西即可工作。 但我不想用這個。 ;-)

Answer 4

您還可以根據表單元素的操作將數據目標應用於錨點和eval：

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

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

在這個JSFiddle上詳細顯示