jQuery - 检查单选按钮的当前状态并隐藏div [英] jQuery - Check current state of radio button and hide div

问题描述

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

QUESTION: How would I check the value of a radio button onload and if it is a certain value, perform an action based up on that? Referenced at the end of my code in the if statement.

更多深入解释

所以我知道这个问题的标题可能听起来很熟悉其他问题，但我有更多的参与，并试图找到最好的方法来接近它。所以，在我的函数 homepageDisplayHandleSelection（）我根据 .homepage_display 区域。然后，我基本上为其中的另一组单选按钮使用相同的功能，名为 mainImageLinkHandleSelection ，然后根据选择隐藏/显示区域。我可以在静态和幻灯片选项之间切换，但初始视图（如果页面加载时选择幻灯片，它仍然显示辅助单选按钮 mainImageLinkHandleSelection ，直到我点击幻灯片选项并返回静态它可以自行更正。

So I know the title of this might sound familiar to other questions, but I have a bit more involved and trying to see the best way to approach it. So, in my function homepageDisplayHandleSelection() I hide/show areas based on the selection of radio buttons from within that .homepage_display area. Then, I basically use that same functionality for another group of radio buttons within it called mainImageLinkHandleSelection and then hides/shows areas based on the selection. I can switch between the Static and Slide option just fine, but the initial view (if Slideshow is selected when the page loads) is that it is still showing the secondary radio buttons mainImageLinkHandleSelection and it is not until I click off of the Slideshow option and back to Static that it corrects itself.

因此，我尝试通过创建一个检查当前检查的无线电值是否为来解决此问题（在示例代码的底部）幻灯片如果是这样，我隐藏一个名为 main_link 的div（它也附加到 mainImageLinkHandleSelection周围的每个区域 divs）。我知道我的问题中有很多部分，但我想如果有人可以提供帮助，那里会有一个天才;）非常感谢你们所有的帮助！

So, I attempted to fix this (at the bottom of the example code) by creating a check if the current radio value that is checked is slideshow and if so, I hide a div called main_link (which is also attached to each of the areas around the mainImageLinkHandleSelection divs). I know my question has bunch of parts in it, but I figured if anyone could help, there'd be a genius out there somewhere ;) Thank you very much for any and all help!

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

});

推荐答案

好吧，我假设每个单选按钮都有一个独特的价值，它们都被赋予相同的名称。在这种情况下，你想要的是：选中选择器：

Well, I'm assuming that each radio button has a unique value, and they are all given the same name. In that case, what you want is the :checked selector:

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

这会得到你的价值当前选中的单选按钮。如果你已经想要检查单选按钮的 id ，那么它就像这样简单：

That will get you the value of the currently selected radio button. If you already have the id of the radio button you want to check, then it's as simple as:

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

具体来说，既然你特意要查看幻灯片值，我相信你的如果语句将变为：

Specifically, since you specifically want to check on the slideshow value, I believe your if statement will become:

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元素分组。

EDIT: I see your issue now. The problem is that you hide all the .main_link elements, as well as the .homepage_display elements. But when you click on the homepage selection radio button, you don't then go through and re-display the .main_link element that is reflected by the yhlumberyardstraditional3[of_main_image_link_option] radio button group.

两件事：

1. 使用更改事件处理程序而不是单击。当单击已经选中的单选按钮时，这将阻止整个动画序列不必要地运行。


2. 当显示元素时，您需要查看是否选中了任何单选按钮然后触发那些单选按钮的更改事件处理程序。

1. Use the change event handler instead of click. This will prevent the whole animation sequence from needlessly running when an already selected radio button is clicked.
2. When an element is shown, you'll need to see if any radio buttons are checked and then trigger the change event handler for those radio buttons.

我走了使用概念验证提前更新你的小提琴。主要变化如下：

I've gone ahead an updated your fiddle with a proof-of-concept. The main change is as follows:

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线。请查看此处。

I also took the liberty of generalizing the problem and shrunk the code down to 39 lines. Check it out here.

这篇关于jQuery - 检查单选按钮的当前状态并隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！