Obtenir la Forme la plus Proche d'un Élément en jQuery

J'ai ce js/jquery script que j'ai écrit pour vérifier tous les checboxes avec un formulaire. Il fonctionne bien, mais il contrôle toutes les cases qui sont sur la page, indépendamment de la forme wrapper ils sont.

ici est la fonction

function toggleCheck(state)
{   var checkboxes = jQuery("form input:checkbox");
if(state==true){checkboxes.prop('checked',true); }
if(state==false){ checkboxes.prop('checked',false); }
}

utilisation 

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

Remarque cela fonctionne bien, mais mon problème est que si je dois 

 <form action="myaction-page">//some form elements and checkboxes </form>

et 

<form action="myaction-page-2">//some form elements and checkboxes </form>

et j'cliquez sur le lien tout en form1, toutes les cases obtient chèque, y compris ceux dans form2.

Est-il un moyen de les séparer sans introduire de la forme id ou les noms?..c'est parce que j'ai largement utilisé dans le code de production et de réécrire le tout aura des problèmes.

Toute Aide sera grandement appréciée.

P. S il est intéressant de noter que le tout sélectionner et désélectionner tous sont dans les deux formes et deux formes sont sur la même page.

Sont vos "sélectionner tout" et "tout désélectionner" cases à cocher dans les formulaires?
Pourquoi avez-vous si l'instruction? checkboxes.prop('checked',state);
oui tout sélectionner et désélectionner tous sont dans les deux formes....ils sont supposons qu'à sélectionner en fonction de la forme sous laquelle ils appartiennent
sauf si l'état n'est pas défini
Il dit qu'ils sont inutiles. if (someBool == true) { doSomething(true); } else if (someBool == false) { doSomething(false); } est le même que doSomething(someBool);

OriginalL'auteur jcobhams | 2013-10-03

  1. 15

    En supposant que vous sélectionnez/désélectionnez les liens sont à l'intérieur de la forme, ne:

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

    Et de modifier votre lien JS (passer à la appropriée true/false paramètre):

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

    jsFiddle exemple

    la mise à jour de l'élément ancre va poser des problèmes que j'ai plus de 50 pages de définir de cette façon...merci pour la réponse tho!
    Si vous ne pouvez pas mettre à jour l'ancrage de l'élément, alors vous êtes hors de la chance. sans mise à jour, il n'y a pas moyen de automatiquement de ciblage de l'élément (dans tous les navigateurs). C'est ce que vous (ou la personne qui a écrit le code) à l'aide de inline-événements, le code qui est difficile/impossible à maintenir.
    pourrions-nous faire jQuery(event.target).closest("form").find("input:checkbox").prop('checked', state);?
    est event défini dans tous les navigateurs à l'échelle mondiale? Je sais qu'il va travailler dans Chrome, mais j'ai quelque doute que c'est toujours le cas.
    Il y a des éditeurs qui vous permettent de facilement remplacer x par y, notepad++ par exemple. Vous pouvez remplacer toutes les occurences de toggleCheck\((true|false)+\) avec toggleCheck($1,this) en un seul balayage à l'aide de la regexp drapeau et remplacer dans les fichiers dans un répertoire spécifique à la fois. Il va même vous permettre de filtrer uniquement les fichiers qui correspondent à un modèle spécifique.

    OriginalL'auteur j08691

  2. 1

    l' .plus proche de la méthode de faire ce que vous souhaitez.

    onclick:

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

    js:

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

    OriginalL'auteur Kevin B

  3. 1

    La réponse est: cela dépend de votre DOM. Si votre <a> éléments sont à l'intérieur de la forme, vous pouvez utiliser $.plus proche (le):

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

    J'ai légèrement modifié ton code pour augmenter la lisibilité de la performance (voir les notes supplémentaires concernant la :case sélecteur) et d'être plus "jQuery".

    [modifier]
    Après avoir lu les commentaires j'ai réécrit la fonction, toujours sur l'hypothèse que le <a> éléments sont à l'intérieur de la <form>, cette fois aussi avec un travail jsFiddle:

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

    [edit2]
    Et pour le bien du souci d'exhaustivité quant à mon commentaire sur l'ordre des éléments (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]
    La dernière édition, je le promets. Cette fois, j'ignore la valeur par défaut de rappel et ne mon propre truc:

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

    Fonctionne sans avoir à toucher quoi que ce soit. Mais je ne voudrais pas utiliser ce. 😉

    ai-je besoin de mettre à jour ma balise d'ancrage?
    Pas si c'est à l'intérieur de la <form> élément, alors tout devrait fonctionner comme est. Si ils ne le sont pas, on aurait pu tricher un peu (en supposant que le premier <a> éléments de bascule de la première <form> et ainsi de suite...
    les références de la fenêtre dans ce cas, et la fenêtre de la plupart des n'est certainement pas à l'intérieur d'une forme.
    Damned, vous avez raison. Mais il ne faut pas utiliser toggleCheck, il pourrait tout simplement écouter de la cliquez sur l'événement à l'échelle mondiale et de basculer en conséquence (assumgin la première <a> éléments de bascule de la première <form>et ainsi de suite...), n'est pas u pense?
    La droite, qui ne fonctionne que dans les navigateurs qui ont event défini sur la fenêtre de firefox n'est pas l'un d'eux.

    OriginalL'auteur nietonfir

  4. 0

    Vous pouvez aussi appliquer de données cible pour vos ancres et eval basée sur l'action des éléments de votre formulaire:

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

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

    Montré en détail sur cette JSFiddle

    si je mettre à jour tous les tags ancres sur toutes les pages, ce qui ne m'empêche de mettre à jour l'attribut onclick, comme conseillé par d'autres réponses...merci tout de même.

    OriginalL'auteur Speedy