Masquage/affichage du contenu du cours si la case est cochée

Question

Impossible de faire fonctionner la section de la case à cocher. Le .hide() fonctionne bien, mais le reste refuse de le montrer à nouveau.

Autres versions du même code gâcher d'autres morceaux de script sur la page, et bascule est un pas aller en raison du temps de chargement (si un visiteur clique trop tôt, il finit par inversée!)

Essentiellement, Tout ce que je cherche, c'est cacher le contenu si la case est cochée, et le montrer à nouveau s'il n'est pas coché.

jQuery(document).ready(function($) { 

    $('.sponsor_table').hide(); 
    $('.sponsor_address').hide(); 
    $('input[type="checkbox"]').click(function(){ 
     if($('input[name="remain_anonymous"]:checked')) { 
      $('.sponsor_name').hide(); 
      $('.sponsor_logo').hide(); 
      $('.sponsor_website').hide(); 
     } else { 
      $('.sponsor_name').show(); 
      $('.sponsor_logo').show(); 
      $('.sponsor_website').show(); 
     } 
    }); 
    $('input[type="radio"]').click(function(){ 
     if($('input[name="cb_sponsor_attendance"]:checked').val() == "Yes"){ 
      $('.sponsor_table').fadeIn('slow'); 
      $('.sponsor_address').hide(); 
     } 
     else if($('input[name="cb_sponsor_attendance"]:checked').val() == "No"){ 
      $('.sponsor_address').fadeIn('slow'); 
      $('.sponsor_table').hide(); 
     } 
    }); 

}); 

Le code HTML complet de la section de case à cocher est:

<div id="remain_anonymous-wrap" class="form-row anonymous_sponsor">  <label class="give-label" for="ffm-remain_anonymous"> 
     Make this donation anonymous?      <span class="give-tooltip give-icon give-icon-question" 
       data-tooltip="Details will not be shared on the site, or at the event"></span> 
       </label> 
      <span data-required="no" data-type="checkbox"></span> 

    <span class="ffm-fields"> 

       <label> 
        <input type="checkbox" name="remain_anonymous[]" 
          value="Yes, please don&#039;t share my identity" /> 
        Yes, please don't share my identity     </label> 
          </span> 


    </div><div id="cb_sponsor_name-wrap" class="form-row sponsor_name">  <label class="give-label" for="ffm-cb_sponsor_name"> 
     Your Name/Business Name      <span class="give-tooltip give-icon give-icon-question" 
       data-tooltip="This will be shared both online and on the table at the gala."></span> 
       </label> 
      <input class="textfield" 
      id="ffm-cb_sponsor_name" type="text" 
      data-required="no" 
      data-type="text" name="cb_sponsor_name" 
      placeholder="" value="" 
      size=" 100" /> 

    </div><div id="cb_sponsor_logo-wrap" class="form-row sponsor_logo">  <label class="give-label" for="ffm-cb_sponsor_logo"> 
     Photo/Logo     </label> 

    <div id="ffm-cb_sponsor_logo-upload-container"> 
     <div class="ffm-attachment-upload-filelist"> 
      <a id="ffm-cb_sponsor_logo-pickfiles" class="button file-selector" 
       href="#">Select File(s)</a> 

      <span class="ffm-file-validation" data-required="no" data-type="file"></span> 
      <ul class="ffm-attachment-list give-thumbnails"> 
           </ul> 
     </div> 
    </div><!-- .container --> 


    <script type="text/javascript"> 
     jQuery(function ($) { 
      new Give_FFM_Uploader('ffm-cb_sponsor_logo-pickfiles', 'ffm-cb_sponsor_logo-upload-container', 1, 'cb_sponsor_logo', 'jpg,jpeg,gif,png,bmp,', 2048); 
     }); 
    </script> 
    </div><div id="cb_sponsor_website-wrap" class="form-row sponsor_website">  <label class="give-label" for="ffm-cb_sponsor_website"> 
     Website     </label> 

    <input id="ffm-cb_sponsor_website" type="url" class="give-url" 
      data-required="no" data-type="text"    name="cb_sponsor_website" 
      placeholder="" value="" 
      size="100"/> 

    </div> 

Answer 1

Essayez ce ci-dessous le code et vérifier:

$('input[type="checkbox"]').click(function() { 
 
     $('.sponsor_name,.sponsor_website,.sponsor_logo').show(); 
 
     if ($(this).is(':checked')) { 
 
     $('.sponsor_name,.sponsor_website,.sponsor_logo').hide(); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="remain_anonymous-wrap" class="form-row anonymous_sponsor">  <label class="give-label" for="ffm-remain_anonymous"> 
 
     Make this donation anonymous?      <span class="give-tooltip give-icon give-icon-question" 
 
       data-tooltip="Details will not be shared on the site, or at the event"></span> 
 
       </label> 
 
      <span data-required="no" data-type="checkbox"></span> 
 

 
    <span class="ffm-fields"> 
 

 
       <label> 
 
        <input type="checkbox" name="remain_anonymous[]" 
 
          value="Yes, please don&#039;t share my identity" /> 
 
        Yes, please don't share my identity     </label> 
 
          </span> 
 

 

 
    </div><div id="cb_sponsor_name-wrap" class="form-row sponsor_name">  <label class="give-label" for="ffm-cb_sponsor_name"> 
 
     Your Name/Business Name      <span class="give-tooltip give-icon give-icon-question" 
 
       data-tooltip="This will be shared both online and on the table at the gala."></span> 
 
       </label> 
 
      <input class="textfield" 
 
      id="ffm-cb_sponsor_name" type="text" 
 
      data-required="no" 
 
      data-type="text" name="cb_sponsor_name" 
 
      placeholder="" value="" 
 
      size=" 100" /> 
 

 
    </div><div id="cb_sponsor_logo-wrap" class="form-row sponsor_logo">  <label class="give-label" for="ffm-cb_sponsor_logo"> 
 
     Photo/Logo     </label> 
 

 
    <div id="ffm-cb_sponsor_logo-upload-container"> 
 
     <div class="ffm-attachment-upload-filelist"> 
 
      <a id="ffm-cb_sponsor_logo-pickfiles" class="button file-selector" 
 
       href="#">Select File(s)</a> 
 

 
      <span class="ffm-file-validation" data-required="no" data-type="file"></span> 
 
      <ul class="ffm-attachment-list give-thumbnails"> 
 
           </ul> 
 
     </div> 
 
    </div><!-- .container --> 
 

 
    </div><div id="cb_sponsor_website-wrap" class="form-row sponsor_website">  <label class="give-label" for="ffm-cb_sponsor_website"> 
 
     Website     </label> 
 

 
    <input id="ffm-cb_sponsor_website" type="url" class="give-url" 
 
      data-required="no" data-type="text"    name="cb_sponsor_website" 
 
      placeholder="" value="" 
 
      size="100"/> 
 

 
    </div>

Answer 2

essayer d'utiliser cette fonction dans votre checkbox

$("input[name=anonymous_sponsor]").change(function() { 
     if(this.checked) { 
     $('.sponsor_name').hide(); 
     $('.sponsor_logo').hide(); 
     $('.sponsor_website').hide(); 
    } else { 
     $('.sponsor_name').show(); 
     $('.sponsor_logo').show(); 
     $('.sponsor_website').show(); 
    } 

    }); 

Answer 3

En supposant que vous avez un champ d'entrée avec un nom « your_input_field_name » <input name="your_input_field_name" type="checkbox" > que vous voulez écouter un changement

$('input[name="your_input_field_name"]').change(function(){ 
    if($(this).is(':checked')){ 
    //if ture 
    }else{ 
    //if false 
    } 
}); 

Answer 4

Résolu:

Apparemment, le nom de l'entrée devait correspondre au code HTML exactement pour cette pour fonctionner correctement, y compris les crochets qui ne sont pas répertoriés dans la partie arrière de WordPress (capture d'écran ci-dessous).

Modification du nom d'entrée: remain_anonymous [] semble avoir fait le tour. Bien qu'il n'y ait qu'une seule instance de remain_anonymous sur la page, cela ne fonctionnera pas sans elles.

Je ne sais pas pourquoi, mais ça marche.

Merci à tous pour votre aide, et merci à ionut de m'avoir suggéré de poster le code HTML. La première fois que je l'ai regardé ... doh

Answer 5

Essayez comme ceci, j'ai modifié votre code.

jQuery(document).ready(function($) { 
 

 
    $('.sponsor_table').hide(); 
 
    $('.sponsor_address').hide(); 
 
    $('input[name="remain_anonymous[]"]').click(function(evt){ 
 
     if($(evt.currentTarget).is(':checked')) { 
 
      $('.sponsor_name').hide(); 
 
      $('.sponsor_logo').hide(); 
 
      $('.sponsor_website').hide(); 
 
     } else { 
 
      $('.sponsor_name').show(); 
 
      $('.sponsor_logo').show(); 
 
      $('.sponsor_website').show(); 
 
     } 
 
    }); 
 
    $('input[type="radio"]').click(function(){ 
 
     if($('input[name="cb_sponsor_attendance"]:checked').val() == "Yes"){ 
 
      $('.sponsor_table').fadeIn('slow'); 
 
      $('.sponsor_address').hide(); 
 
     } 
 
     else if($('input[name="cb_sponsor_attendance"]:checked').val() == "No"){ 
 
      $('.sponsor_address').fadeIn('slow'); 
 
      $('.sponsor_table').hide(); 
 
     } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="remain_anonymous-wrap" class="form-row anonymous_sponsor">  <label class="give-label" for="ffm-remain_anonymous"> 
 
     Make this donation anonymous?      <span class="give-tooltip give-icon give-icon-question" 
 
       data-tooltip="Details will not be shared on the site, or at the event"></span> 
 
       </label> 
 
      <span data-required="no" data-type="checkbox"></span> 
 

 
    <span class="ffm-fields"> 
 

 
       <label> 
 
        <input type="checkbox" name="remain_anonymous[]" 
 
          value="Yes, please don&#039;t share my identity" /> 
 
        Yes, please don't share my identity     </label> 
 
          </span> 
 

 

 
    </div><div id="cb_sponsor_name-wrap" class="form-row sponsor_name">  <label class="give-label" for="ffm-cb_sponsor_name"> 
 
     Your Name/Business Name      <span class="give-tooltip give-icon give-icon-question" 
 
       data-tooltip="This will be shared both online and on the table at the gala."></span> 
 
       </label> 
 
      <input class="textfield" 
 
      id="ffm-cb_sponsor_name" type="text" 
 
      data-required="no" 
 
      data-type="text" name="cb_sponsor_name" 
 
      placeholder="" value="" 
 
      size=" 100" /> 
 

 
    </div><div id="cb_sponsor_logo-wrap" class="form-row sponsor_logo">  <label class="give-label" for="ffm-cb_sponsor_logo"> 
 
     Photo/Logo     </label> 
 

 
    <div id="ffm-cb_sponsor_logo-upload-container"> 
 
     <div class="ffm-attachment-upload-filelist"> 
 
      <a id="ffm-cb_sponsor_logo-pickfiles" class="button file-selector" 
 
       href="#">Select File(s)</a> 
 

 
      <span class="ffm-file-validation" data-required="no" data-type="file"></span> 
 
      <ul class="ffm-attachment-list give-thumbnails"> 
 
           </ul> 
 
     </div> 
 
    </div><!-- .container --> 
 

 

 
    <script type="text/javascript"> 
 
     jQuery(function ($) { 
 
      //new Give_FFM_Uploader('ffm-cb_sponsor_logo-pickfiles', 'ffm-cb_sponsor_logo-upload-container', 1, 'cb_sponsor_logo', 'jpg,jpeg,gif,png,bmp,', 2048); 
 
     }); 
 
    </script> 
 
    </div><div id="cb_sponsor_website-wrap" class="form-row sponsor_website">  <label class="give-label" for="ffm-cb_sponsor_website"> 
 
     Website     </label> 
 

 
    <input id="ffm-cb_sponsor_website" type="url" class="give-url" 
 
      data-required="no" data-type="text"    name="cb_sponsor_website" 
 
      placeholder="" value="" 
 
      size="100"/> 
 

 
    </div>