jQuery - 检查单选按钮的当前状态并隐藏 div

Question

问题:如何检查单选按钮 onload 的值，如果它是某个值，则根据该值执行操作？在我的代码末尾的 if 语句中引用。

更深入的解释

所以我知道这个标题对于其他问题来说可能听起来很熟悉，但我有更多的参与并试图找到解决它的最佳方法。因此，在我的函数 homepageDisplayHandleSelection() 中，我根据 .homepage_display 区域中单选按钮的选择来隐藏/显示区域。然后，我基本上对其中名为 mainImageLinkHandleSelection 的另一组单选按钮使用相同的功能，然后根据选择隐藏/显示区域。我可以在 Static 和 Slide 选项之间切换，但初始 View (如果在页面加载时选择 Slideshow)是这样的仍然显示辅助单选按钮 mainImageLinkHandleSelection ，直到我单击 Slideshow 选项并返回到 Static 时，它才会自行更正。

因此，我尝试通过创建一个检查来修复此问题(在示例代码的底部)，检查当前检查的单选值是否为 slideshow，如果是，则隐藏一个名为 main_link (它也附加到 mainImageLinkHandleSelection div 周围的每个区域)。我知道我的问题有很多部分，但我想如果有人可以提供帮助，那么某个地方就会有一个天才；)非常感谢您提供的所有帮助!

jQuery(document).ready(function() {

    // Homepage Settings - Homepage Display
    // This function handles the radio clicks.
    function homepageDisplayHandleSelection() {
        var duration = 400;
        jQuery('.homepage_display').hide(duration);
        jQuery('.main_link').hide(duration);
        if (this.value === "slideshow") {
          jQuery('.homepage_display_slides').show(duration);     
        } else if (this.value === "static") {
          jQuery('.homepage_display_static').show(duration);     
        }
    }

    // Attach a click handler to the radios
    // and trigger the selected radio
    jQuery('#section-of_homepage_display :radio')
        .click(homepageDisplayHandleSelection)
        .filter(':checked').trigger('click');

    // Homepage Settings - Main Link Options
    // This function handles the radio clicks.
    function mainImageLinkHandleSelection() {
        var duration = 400;
        jQuery('.main_link').hide(duration);
        if (this.value === "external_url") {
          jQuery('.main_link_external').show(duration);     
        } else if (this.value === "wp_page") {
          jQuery('.main_link_page').show(duration);     
        }
          else if (this.value === "wp_post") {
          jQuery('.main_link_post').show(duration);     
        }
          else if (this.value === "wp_taxonomy") {
          jQuery('.main_link_category').show(duration);     
        }
    }

    // Attach a click handler to the radios
    // and trigger the selected radio
    jQuery("#section-of_main_image_link_option :radio")
        .click(mainImageLinkHandleSelection)
        .filter(":checked").trigger("click");


  // Make sure main image link option are hidden by default if slideshow option is selected
    if (jQuery('#section-of_homepage_display :radio :checked').val() === 'slideshow') {
      jQuery('.main_link').hide();
    }

});

Answer 1

嗯，我假设每个单选按钮都有一个唯一的值，并且它们都具有相同的名称。在这种情况下，您需要的是 :checked 选择器:

var $selected = $('input[name="RadioGroup"]:checked', '#someform');
if($selected.length == 0) {
   // None is selected
} else {
   var whichOne = $selected.val();
   // do stuff here
}

这将为您提供当前所选单选按钮的值。如果您已经有了要检查的单选按钮的 id，那么就很简单:

$('#someradiobutton').is(':checked') // returns true if checked, else false

具体来说，由于您特别想检查 slideshow 值，我相信您的 if 语句将变为:

if (jQuery('input[name="mainImageLinkHandleSelection"][value="display"]', '#section-of_homepage_display').is(':checked')) {
  jQuery('.main_link').hide();
}

编辑:我现在看到了您的问题。问题是您隐藏了所有 .main_link 元素以及 .homepage_display 元素。但是，当您单击主页选择单选按钮时，您不会浏览并重新显示 yhlumberyardstraditional3[of_main_image_link_option] 单选按钮组反射(reflect)的 .main_link 元素。

有两件事:

1. 使用change事件处理程序而不是click。这将防止在单击已选择的单选按钮时不必要地运行整个动画序列。
2. 显示元素时，您需要查看是否选中了任何单选按钮，然后触发这些单选按钮的 change 事件处理程序。

我已经继续了updated your fiddle并进行概念验证。主要变化如下:

var toShow = null;
if (this.value === "slideshow") {
  toShow = '.homepage_display_slides';
} else if (this.value === "static") {
  toShow = '.homepage_display_static';
}

if(toShow) {
    jQuery(toShow).show(duration);
    // If we just showed any checked radio buttons, let's re-trigger
    // them so they can update their groups and such
    jQuery('input:checked:visible', toShow).trigger('change');
}

我还冒昧地概括了该问题并将代码缩减至 39 行。看看here .