Code JQuery pour afficher/masquer les éléments de formulaire

J'ai un formulaire rempli de 3 lignes de cases à cocher. Je voudrais seulement que les deux deuxièmes rangées soient disponibles si et seulement si la troisième case n'est cochée que dans la première rangée. En ce moment, je reçois toutes les trois lignes montrant tout le temps, il est donc très possible que je n'appelle pas jQuery correctement.

En outre, il serait bien que le formulaire soit automatiquement mis à l'échelle pour tenir compte de la perte/gain de lignes lorsque le cache/spectacle. Est-ce que cela arrive automatiquement (j'utilise Bootstrap si cela fait une différence).

Voici le code:

jQuery

<body>
  <script>
    $(function showHide() {
        $("name=checkboxes").click(function() {
            if (($('.checkboxes-farms').prop('checked', true)) || $('.checkboxes-fields').prop('checked', true) || $('.checkboxes-cropzones').prop('checked', false)) {
                $('#group2').hide();
                $('#group3').hide();
            }
        });
    });
  </script>
</body>

HTML

      <form class="form-horizontal">
        
<!-- Form Name --> Select Entities to Search For <!-- Multiple Checkboxes (inline) --> <div class="form-group" id="group1"> <div class="col-md-4"> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group" id="group2"> <div class="col-md-4"> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="form-group" id="group3"> <div class="col-md-4"> </div> </div>
 
      </form>
1
Pourriez-vous faire une démonstration de jsbin.com ?
ajouté l'auteur SaidbakR, source
function showHide() .. vous n'avez pas appelé cette fonction nulle part
ajouté l'auteur Bhadra, source
$ ("nom = cases à cocher") whatttt ??????????? :RÉ
ajouté l'auteur Aamir Afridi, source
Correction de quelques bugs pour. J'espère que vous pouvez le prendre à partir d'ici jsfiddle.net/aamir/P4KKd :) Astuce. Recherchez toujours les erreurs dans votre console. Jetez un oeil à fixingthesejquery.com/#slide1 ;)
ajouté l'auteur Aamir Afridi, source

3 Réponses

Essayer:

$(document).ready(function(){
    $("input[name='checkboxes']").change(function() {
        if (($('#checkboxes-farms').prop('checked') == false) && ($('#checkboxes-fields').prop('checked') == false) && ($('#checkboxes-cropzones').prop('checked') == true)) {
            $('#group2,#group3').show();
        } else {
            $('#group2,#group3').hide();
        }
    });
});

Fiddle ici.

2
ajouté
Fonctionne bien dans le violon, mais pas dans le HTML lui-même, suis-je appeler la fonction de manière incorrecte en plaçant simplement votre réponse dans une balise <script> </script> ? btw, +1
ajouté l'auteur Alex Chumbley, source
merci :) écrire sous la fonction ready . Comme $ (document) .ready (function() {$ ("input [name = 'checkboxes"] "). C & zwnj; changement ........});
ajouté l'auteur Hiral, source

Vous devez les cacher au départ - suggérer de le faire dans la fonction de préparation de document jquery, par exemple:

$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
});

Et j'attacher un événement 'change' à la case à cocher qui contrôle l'affichage des champs supplémentaires.

Faites-moi savoir si vous avez besoin d'un exemple de saut ensemble sur jsfiddle ou similaire.

1
ajouté
$(function() {
    $('[name="checkboxes"]').on('change', function() {
        var others_checked = $('#checkboxes-fields, #checkboxes-farms').is(':checked');
        $('#group2, #group3').toggle($('#checkboxes-cropzones').is(':checked') && !(others_checked));
    }).trigger('change');
});

FIDDLE

1
ajouté
Désolé si ce n'était pas plus clair, mais les deux dernières lignes ne devraient pas être disponibles si la troisième case à cocher ET l'une des deux autres sont cochées
ajouté l'auteur Alex Chumbley, source
Édition merveilleuse!
ajouté l'auteur Alex Chumbley, source
@AlexChumbley - alors je suppose que je vais devoir l'éditer!
ajouté l'auteur adeneo, source