Question

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

.hide（）工作正常，但是其他人拒绝再次显示它。

同一代码的其他版本弄乱了页面上的其他一些脚本，并且由于加载时间而导致切换是不可行的（如果访问者太早点击它会最终反转！）

基本上，我正在寻找的是在勾选复选框时隐藏内容，如果未勾选则再次显示内容。

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

假设您有一个名为'your_input_field_name'<input name="your_input_field_name" type="checkbox" >的输入字段，您想要监听更改

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

Answer 4

解决了：

显然输入名称必须与HTML完全匹配才能正常工作，包括那些没有列在WordPress后端的方括号（下面的屏幕截图）。

a back_end

将输入名称更改为：remaining_anonymous []似乎已成功完成。尽管页面上只有一个retain_anonymous实例，但没有它们就无法工作。

我不知道为什么，但它正在发挥作用。

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

Answer 5

尝试这样，我修改了你的代码。

＆＃13;

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

＆＃13;

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

＆＃13;

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

5 个答案: