如何使用jquery显示2个或更多基于div的无线电选择？ 问题已解决，但如果您有更有效的解决方案，则更受欢迎。

我知道以前有人问过这样的问题，但我很难让它起作用

我正试着根据一个电台的选择来播放一些节目。HTML是由

wptheming option framework

自动生成的，因此我无法更改它。我能改变的是我试图编写的jQuery函数，但运气不好

[这是我为测试我的想法而编写的代码][1]，但它不起作用

我重复一遍，我可以更改jQuery部分，但不能更改HTML。我做错了什么

对于不想转到JSFIDLE的代码：

@Zakary Kniebel

作者@Zakary Kniebel

实际上，代码将执行以下操作：

如果选择1，则仅显示1个截面， 如果选择2，则仅显示2个部分， 等等

副作用，不需要，但很好，在第一次选择后，无论您选择的数字是多少，任何其他的

都将消失，以便让您专注于单选按钮，如果您不需要此效果，只需将此：

/

放在此之前：

$(".section").not("#section-how_many_custom_posts").hide();

或者写下不会消失的部分的选择器

HTML

}))

CSS

您需要更改：

$types=$（'section-how_number_custom_posts'）

到

$types=$（'of radio'）



这是因为，您的ID是唯一的，并且您没有将该ID应用于您的单选按钮。您在所有单选按钮上都有一个普通的单选类
，因此您要做的是选择该类的所有元素，并根据单击该类单选按钮的位置显示所需的
div
s




更新

根据您代码中新发现的错误，我已更新了您的修补程序：




更新2

这不是您最初的问题，但在您的一个评论中，您提到您希望尝试将代码转换为循环。这是工作小提琴：

您想做什么？您已经提供了代码（说真的，很荣幸！），但我不知道您的非工作代码要做什么。我的代码应该显示（基于无线电选择）1个或多个部分。。。示例radio=1=仅显示了#section-custom_posts_n1 radio=3=#section-custom_posts_n1#显示了section-custom_posts_n2和#section-custom_posts_n3等等…但是您有多组无线电输入；应该使用哪一组作为控件？第一组控制其他组：
那么为什么要使用所有复制？其他
控件
元素用于什么？我意识到这可能是有目的的，您可能无法更改页面中的HTML，但可以显示一个简单的演示来重现您的问题。这太复杂了，而且不想冒犯别人，这是一片混乱。你真的应该清理一下标记的泥沼，降低它的复杂性。
<div id="section-how_many_custom_posts" class="section section-radio hidden" style="display: block;">

<h4 class="heading">Choose how many Custom Posts you would like to generate</h4>

    <div class="option">
        <div class="controls">
            <input class="of-input of-radio" type="radio" name="mdframework[how_many_custom_posts]" id="mdframework-how_many_custom_posts-0" value="0" checked="checked">
            <label for="mdframework-how_many_custom_posts-0">0</label>
            <input class="of-input of-radio" type="radio" name="mdframework[how_many_custom_posts]" id="mdframework-how_many_custom_posts-1" value="1">
            <label for="mdframework-how_many_custom_posts-1">1</label>
            <input class="of-input of-radio" type="radio" name="mdframework[how_many_custom_posts]" id="mdframework-how_many_custom_posts-2" value="2">
            <label for="mdframework-how_many_custom_posts-2">2</label>
            <input class="of-input of-radio" type="radio" name="mdframework[how_many_custom_posts]" id="mdframework-how_many_custom_posts-3" value="3">
            <label for="mdframework-how_many_custom_posts-3">3</label>
            <input class="of-input of-radio" type="radio" name="mdframework[how_many_custom_posts]" id="mdframework-how_many_custom_posts-4" value="4">
            <label for="mdframework-how_many_custom_posts-4">4</label>
            <input class="of-input of-radio" type="radio" name="mdframework[how_many_custom_posts]" id="mdframework-how_many_custom_posts-5" value="5">
            <label for="mdframework-how_many_custom_posts-5">5</label>
        </div>
        <div class="explain">It depends on you, how many custom posts would you like?</div>
    </div>
</div>
<div id="section-custom_posts_n1" class="section section-radio hidden">

<h4 class="heading">Test first custom Post show/hide</h4>

    <div class="option">
        <div class="controls">
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n1]" id="mdframework-custom_posts_n1-0" value="0">
            <label for="mdframework-custom_posts_n1-0">0</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n1]" id="mdframework-custom_posts_n1-1" value="1" checked="checked">
            <label for="mdframework-custom_posts_n1-1">1</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n1]" id="mdframework-custom_posts_n1-2" value="2">
            <label for="mdframework-custom_posts_n1-2">2</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n1]" id="mdframework-custom_posts_n1-3" value="3">
            <label for="mdframework-custom_posts_n1-3">3</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n1]" id="mdframework-custom_posts_n1-4" value="4">
            <label for="mdframework-custom_posts_n1-4">4</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n1]" id="mdframework-custom_posts_n1-5" value="5">
            <label for="mdframework-custom_posts_n1-5">5</label>
        </div>
        <div class="explain">Test first custom Post show/hide</div>
    </div>
</div>
<div id="section-custom_posts_n2" class="section section-radio hidden">

<h4 class="heading">Test second custom Post show/hide</h4>

    <div class="option">
        <div class="controls">
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n2]" id="mdframework-custom_posts_n2-0" value="0">
            <label for="mdframework-custom_posts_n2-0">0</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n2]" id="mdframework-custom_posts_n2-1" value="1" checked="checked">
            <label for="mdframework-custom_posts_n2-1">1</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n2]" id="mdframework-custom_posts_n2-2" value="2">
            <label for="mdframework-custom_posts_n2-2">2</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n2]" id="mdframework-custom_posts_n2-3" value="3">
            <label for="mdframework-custom_posts_n2-3">3</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n2]" id="mdframework-custom_posts_n2-4" value="4">
            <label for="mdframework-custom_posts_n2-4">4</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n2]" id="mdframework-custom_posts_n2-5" value="5">
            <label for="mdframework-custom_posts_n2-5">5</label>
        </div>
        <div class="explain">Test second custom Post show/hide</div>
    </div>
</div>
<div id="section-custom_posts_n3" class="section section-radio hidden">

<h4 class="heading">Test Third custom Post show/hide</h4>

    <div class="option">
        <div class="controls">
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n3]" id="mdframework-custom_posts_n3-0" value="0">
            <label for="mdframework-custom_posts_n3-0">0</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n3]" id="mdframework-custom_posts_n3-1" value="1" checked="checked">
            <label for="mdframework-custom_posts_n3-1">1</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n3]" id="mdframework-custom_posts_n3-2" value="2">
            <label for="mdframework-custom_posts_n3-2">2</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n3]" id="mdframework-custom_posts_n3-3" value="3">
            <label for="mdframework-custom_posts_n3-3">3</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n3]" id="mdframework-custom_posts_n3-4" value="4">
            <label for="mdframework-custom_posts_n3-4">4</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n3]" id="mdframework-custom_posts_n3-5" value="5">
            <label for="mdframework-custom_posts_n3-5">5</label>
        </div>
        <div class="explain">Test Third custom Post show/hide</div>
    </div>
</div>
<div id="section-custom_posts_n4" class="section section-radio hidden">

<h4 class="heading">Test Fourth custom Post show/hide</h4>

    <div class="option">
        <div class="controls">
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n4]" id="mdframework-custom_posts_n4-0" value="0">
            <label for="mdframework-custom_posts_n4-0">0</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n4]" id="mdframework-custom_posts_n4-1" value="1" checked="checked">
            <label for="mdframework-custom_posts_n4-1">1</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n4]" id="mdframework-custom_posts_n4-2" value="2">
            <label for="mdframework-custom_posts_n4-2">2</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n4]" id="mdframework-custom_posts_n4-3" value="3">
            <label for="mdframework-custom_posts_n4-3">3</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n4]" id="mdframework-custom_posts_n4-4" value="4">
            <label for="mdframework-custom_posts_n4-4">4</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n4]" id="mdframework-custom_posts_n4-5" value="5">
            <label for="mdframework-custom_posts_n4-5">5</label>
        </div>
        <div class="explain">Test Fourth custom Post show/hide</div>
    </div>
</div>
<div id="section-custom_posts_n5" class="section section-radio hidden">

<h4 class="heading">Test Fifth custom Post show/hide</h4>

    <div class="option">
        <div class="controls">
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n5]" id="mdframework-custom_posts_n5-0" value="0">
            <label for="mdframework-custom_posts_n5-0">0</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n5]" id="mdframework-custom_posts_n5-1" value="1" checked="checked">
            <label for="mdframework-custom_posts_n5-1">1</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n5]" id="mdframework-custom_posts_n5-2" value="2">
            <label for="mdframework-custom_posts_n5-2">2</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n5]" id="mdframework-custom_posts_n5-3" value="3">
            <label for="mdframework-custom_posts_n5-3">3</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n5]" id="mdframework-custom_posts_n5-4" value="4">
            <label for="mdframework-custom_posts_n5-4">4</label>
            <input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n5]" id="mdframework-custom_posts_n5-5" value="5">
            <label for="mdframework-custom_posts_n5-5">5</label>
        </div>
        <div class="explain">Test Fifth custom Post show/hide</div>
    </div>
</div>

jQuery(document).ready(function ($) {
$types = $('.of-radio');
$types.change(function () {
    $(".section").not("#section-how_many_custom_posts").hide();
    $this = $(this).val();
    if ($this == "1") {
        $('#section-custom_posts_n1').show();
    } else if ($this == "2") {
        $('#section-custom_posts_n1').show();
        $('#section-custom_posts_n2').show();
    } else if ($this == "3") {
        $('#section-custom_posts_n1').show();
        $('#section-custom_posts_n2').show();
        $('#section-custom_posts_n3').show();

    } else if ($this == "4") {
        $('#section-custom_posts_n1').show();
        $('#section-custom_posts_n2').show();
        $('#section-custom_posts_n3').show();
        $('#section-custom_posts_n4').show();

    } else if ($this == "5") {
        $('#section-custom_posts_n1').show();
        $('#section-custom_posts_n2').show();
        $('#section-custom_posts_n3').show();
        $('#section-custom_posts_n4').show();
        $('#section-custom_posts_n5').show();
    }
});

.hidden {
    display:none
}