Jquery 勾选复选框时隐藏/显示类内容

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

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

---

尝试以下代码并检查：

$'input[type=checkbox]'。单击函数{ $'。赞助商名称，。赞助商网站，。赞助商徽标。展示； 如果$this.is'：选中'{ $'。赞助商名称，。赞助商网站，。赞助商徽标。隐藏； } }; 匿名捐款？ 是的，请不要分享我的身份 您的姓名/企业名称 照片/标志 网站

---

尝试在复选框中使用此函数

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

    });

---

假设您有一个名为“your\u input\u field\u name”的输入字段，您希望侦听该字段的更改

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

已解决：

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

将输入名称更改为：remaine_anonymous[]似乎已经做到了这一点。尽管页面上只有一个保持匿名的实例，但如果没有它们，它将无法工作

我不知道为什么，但它起作用了

---

谢谢你们所有人的帮助，也谢谢ionut建议我发布HTML。我第一次真的看到它。。。doh

像这样试试，我已经修改了你的代码

jQuerydocument.readyfunction${ $'.sandor_table'.hide； $'.赞助商地址'.隐藏； $'input[name=保持匿名[]'。单击函数EVT{ 如果$evt.currentTarget.is'：选中{ $'.赞助商名称'.隐藏； $'.赞助商_徽标'.隐藏； $'.赞助商_网站'.隐藏； }否则{ $'.赞助商名称'.显示； $赞助商(标识)展示； $。赞助商网站。展示； } }; $'input[type=radio]'。单击函数{ 如果$'input[name=cb\U赞助商\U出席人数]：已选中。val==Yes{ $'.sandor_table'.fadeIn'slow'； $'.赞助商地址'.隐藏； } 如果$'input[name=cb\U赞助商\U出席人数]：已选中，则为else。val==否{ $'.赞助商地址'.fadeIn'slow'； $'.sandor_table'.hide； } }; }; 匿名捐款？ 是的，请不要分享我的身份 您的姓名/企业名称 照片/标志 jQueryfunction${ //新的Give_FFM_上传器'FFM-cb_赞助商_logo-pickfiles'，'FFM-cb_赞助商_logo-upload-container'，1'，'cb赞助商_logo'，'jpg，jpeg，gif，png，bmp'，2048； }; 网站

---

请给我们看一下HTML。可能是@urbz的副本-页面上还有另一个复选框，但是是由插件放在那里的，不是我放的。我不知道他们使用了什么代码，所有的HTML都是由插件生成的。我已经在这里尝试了半打其他帖子的建议。。。如果我已经尝试了我能想到/找到的所有东西，我觉得我不应该被记下复制的分数：/您的HTML没有名为“赞助商名称”或“赞助商”的类_logo@MilanChheda-哎呀！那是我的错。我粘贴了错误帖子中的HTML。更新。不：现在什么都不做。单击它没有效果。已更新。希望这有助于Salas，脚本已经包含在页面中，并可用于其他元素。所有HTML都是由WordPress插件生成的。我无法控制HTML输出，无法粘贴整个内容，因为它太长了。。。例如，网址是：[link]尝试了早期的版本。什么都不做：唉，还是什么都不做。。。勾选或取消勾选该框无效。您的代码中带有匿名赞助商名称的复选框位于HTML的顶部。但是，即使用“name=remain\u anonymous”（这似乎是插件给它命名的名称）替换它，也不起作用。您使用哪个插件？否：“$”输入[name=rem

---

ain_anonymous]'.changefunction{if$this.is'：选中“{$'.赞助商名称”.hide；$'.赞助商标识.hide；$'.赞助商网站.hide；}其他{$'.赞助商名称.show；$'.赞助商标识.show；$'.赞助商网站.show；}什么都不做。呸！输入名称必须包含方括号！什么将其更改为保持匿名[]似乎成功了！您使用了一个输入数组。有很多匿名的例子吗？如果不去掉名称末尾的括号，这里有一个有效的解决方案，我不知道该说什么。我复制并粘贴了你的确切代码，但它在页面上无法工作。当我移除方括号的那一刻，复选框完全没有任何作用。。。我在我的脚本中看不到任何可能导致这种情况的东西，因此我只能想象问题出在Give的插件脚本中，并且与他们的内置复选框行为存在某种冲突。正常工作，但会影响页面上的所有复选框。每次单击它们中的任何一个，都会显示/隐藏行为。因此，如果您勾选了“保持匿名”，然后决定支付交易费用或接受条款和条件，则会再次显示隐藏字段。我已将jquery选择器更改为name=reserve\u anonymous[]，您正在html中使用它。希望有帮助。请看答案编辑