如果勾選複選框，隱藏/顯示課程內容

Question

似乎無法使複選框部分正常工作。

.hide（）工作正常，但else拒絕再次顯示它。

相同的代碼弄亂腳本的其他位在頁面上的其他版本，並且切換是一個沒有去，由於加載時間（如果訪問者點擊太早它結束了逆轉！）

從本質上講，我要查找的所有內容都是在勾選複選框時隱藏內容，如果未勾選則再次顯示內容。

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

}); 

的複選框節的完整的HTML是：

<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

試試這個下面的代碼，並檢查：

$('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

嘗試使用此功能時，您複選框

$("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

假設你有，你要聽變革

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

Answer 4

解決的名稱「your_input_field_name」 <input name="your_input_field_name" type="checkbox" >一個輸入字段：

顯然，輸入名稱必須與HTML完全匹配此正常工作，包括未在WordPress後端列出的方括號（截圖如下）。

改變輸入名稱：remain_anonymous []似乎已經完成了帽子戲法。儘管頁面上只有一個remaining_anonymous實例，但如果沒有它們，它將無法正常工作。

我不知道爲什麼，但它的工作。

謝謝大家的幫助，並感謝ionut建議我發佈HTML。我第一次看到它... doh

Answer 5

試試這個，我修改了你的代碼。

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>