【问题标题】:Hiding/showing class content if checkbox is ticked如果选中复选框,则隐藏/显示课程内容
【发布时间】:2017-05-29 13:11:16
【问题描述】:

似乎无法使复选框部分正常工作。

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

【问题讨论】:

  • 也请告诉我们HTML
  • @urbz - 页面上有另一个复选框,但由插件放置,而不是我。我不知道他们为此使用了什么代码,所有的 HTML 都是由插件生成的。我已经在这里尝试过其他半打帖子的建议......如果我已经尝试了我能想到/找到的所有东西,我觉得我不应该被标记为重复? ://
  • 您的 HTML 没有名为 sponsor_namesponsor_logo 的类
  • @MilanChheda - 哎呀!那是我的错。我从错误的帖子中粘贴了 HTML。已更新。

标签: jquery checkbox show-hide


【解决方案1】:

尝试在您的复选框中使用此功能

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

    });

【讨论】:

  • 之前尝试过这个版本。什么都不做:(
  • 唉,还是什么都没做……选中或取消选中该框都没有效果。
  • 您的代码中带有 anonymous_sponsor 名称的复选框在哪里
  • 就在 HTML 的顶部。但即使用插件命名的“name=remain_anonymous”替换它也不起作用。
  • 你用的是哪个插件?
【解决方案2】:

试试下面的代码并检查:

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

【讨论】:

  • 不 :( 现在什么都不做。点击它没有效果。
  • 已更新。希望这会有所帮助
  • 唉,该脚本已经包含在页面中并适用于其他元素。所有 HTML 都是由 WordPress 插件生成的。我无法控制 HTML 输出,也无法粘贴整个内容,因为它太长了……例如网址是:[link] (project365.site/support/sydney-2017-table-2)
【解决方案3】:

假设您有一个名称为 'your_input_field_name' &lt;input name="your_input_field_name" type="checkbox" &gt; 的输入字段,您想监听更改

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

【讨论】:

  • 不 :( ' $('input[name="remain_anonymous"]').change(function(){ if($(this).is(':checked')){ $( '.sponsor_name').hide(); $('.sponsor_logo').hide(); $('.sponsor_website').hide(); }else{ $('.sponsor_name').show(); $ ('.sponsor_logo').show(); $('.sponsor_website').show(); } });' 什么都不做。
  • 呸!输入名称必须包含方括号!什么?!将其更改为保持匿名 [] 似乎已经成功了!
  • 您使用了输入数组。是否有很多保持匿名的实例?如果不去掉名称末尾的括号
  • 这里有一个fiddle 有一个可行的解决方案
  • 我不知道该说什么。我复制并粘贴了您的确切代码,但它在页面上不起作用。我删除那些方括号检查框的那一刻绝对没有任何作用......我在我的脚本中看不到任何会导致这种情况的东西,所以我只能想象问题出在Give的插件脚本和某种冲突他们内置的复选框行为。
【解决方案4】:

已解决:

显然,输入名称必须与 HTML 完全匹配才能正常工作,包括那些未在 WordPress 后端列出的方括号(下面的屏幕截图)。

将输入名称更改为:remain_anonymous[] 似乎已经成功了。尽管页面上只有一个保持匿名的实例,但没有它们就无法工作。

我不知道为什么,但它正在工作。

感谢大家的帮助,感谢 ionut 建议我发布 HTML。我第一次真正看到它...... doh

【讨论】:

    【解决方案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>

    【讨论】:

    • 有效,但会影响页面上的所有复选框。每次单击其中任何一个时,您都会获得显示/隐藏行为。因此,如果您勾选了“remain_anonymous”,然后决定要支付交易费用或接受条款和条件,您会再次显示隐藏字段。
    • 我已将 jquery 选择器更改为您在 html 中使用的 name="remain_anonymous[]"。希望有帮助。请看答案编辑
    猜你喜欢
    • 2017-02-04
    • 1970-01-01
    • 2013-11-30
    • 1970-01-01
    • 1970-01-01
    • 2013-05-23
    • 2015-02-21
    • 2016-01-07
    • 1970-01-01
    相关资源
    最近更新 更多