web-dev-qa-db-ja.com

jQueryの要素に最も近いフォームを取得する

私は、フォームですべてのチェックボックスをチェックするために作成したこの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のcheck allリンクをクリックすると、form2のチェックボックスを含むすべてのチェックボックスがチェックされます。

フォームのIDや名前を導入せずにそれらを分離する方法はありますか？..これは、製品コードで広範囲に使用していて、すべてを書き換えるのが面倒なためです。

どんな助けでも大歓迎です。

PSすべて選択とすべて選択解除が両方のフォーム内にあり、両方のフォームが同じページにあることは注目に値します。

javascriptjqueryhtmlcheckbox
12
jcobhams

選択/選択解除リンクがフォーム内にあると想定して、以下を実行します：

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

リンクJSを次のように変更します（適切なtrue/falseパラメータを渡します）：

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

jsFiddleの例

15
j08691

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

答えはDOMによって異なります。 <a>要素がフォーム内にある場合は、 $。closest（） を使用できます。

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

コードを少し変更して、読みやすさ、パフォーマンスを向上させ（ ：checkbox selector に関する追加のメモを参照）、より「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)
}

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

何も触れなくても動作します。しかし、私はこれを使いたくありません。 ;-)

1
nietonfir

フォーム要素のアクションに基づいて、アンカーと評価にデータターゲットを適用することもできます。

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

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

これについて詳しく示します JSFiddle

0
Speedy