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

Question

问题:如何检查单选按钮的值是否为某个值,是否基于此执行操作？在if语句的代码末尾引用.

更深入的解释

所以我知道这个问题的标题可能听起来很熟悉其他问题,但我有更多的参与,并试图找到最好的方法来处理它.因此,在我的功能中,homepageDisplayHandleSelection()我根据.homepage_display该区域内选择的单选按钮隐藏/显示区域.然后,我基本上为其中的另一组单选按钮使用相同的功能mainImageLinkHandleSelection,然后根据选择隐藏/显示区域.我可以在Static和Slide选项之间切换就好了,但初始视图(如果Slideshow在页面加载时选择)是它仍然显示辅助单选按钮mainImageLinkHandleSelection,直到我单击Slideshow选项并返回到Static它更正本身.

所以,我尝试通过创建一个检查当前检查的无线电值是否正确,slideshow以及如果是,我隐藏了一个被调用的div main_link(它也附加到了周围的每个区域)来解决这个问题(在示例代码的底部).mainImageLinkHandleSelection申报单).我知道我的问题有很多部分,但我想如果有人可以提供帮助,那里会有一个天才;)非常感谢你们所有的帮助!

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]单选按钮组反映的.main_link元素.

两件事情:

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

我已经用概念验证更新了你的小提琴.主要变化如下:

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行.检查它在这里.