如果勾选复选框，隐藏/显示课程内容

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>