Jquery 选择特定单选按钮时如何显示特定div

我正在尝试构建类似的东西，不同的是，在选择单选按钮后，我还需要按下submit按钮以显示与该特定按钮一起使用的div。另外，如果客户改变主意，我如何交换显示的div

JS小提琴

HTML

<div class="steps">
    <h2>2. Valj din bankskivas</h2>
    <div id="step2">
        <span class="product" href="#" id="plan"><div class="plan" style="background-image:url(media/images/plan1.jpg);"><input class="radio" type="radio" value="plan1" name="plan"/></div><p>Enkel bankskiva</p></span>
        <span class="product" href="#" id="plan"><div class="plan"  style="background-image:url(media/images/plan2.jpg);"><input class="radio" type="radio" value="plan2" name="plan"/></div><p>L-form</p></span>
        <span class="product" href="#" id="plan"><div class="plan"  style="background-image:url(media/images/plan3.jpg);"><input class="radio" type="radio" value="plan3" name="plan"/></div><p>U-form</p></span>
        <span class="product" href="#" id="plan"><div class="plan"  style="background-image:url(media/images/plan4.jpg);"><input class="radio" type="radio" value="plan4" name="plan"/></div><p>Mattbestallning</p></span>
        <button type="button" class="nasta" onClick="processStep2()">Nasta</button>
    </div>
</div>
<div class="steps">
    <h2>3.  Närmare information</h2>
    <div id="step3">
        <div class="step_left">
            <div class="plan1">
                <h3>3.1. Välj bänkskivans mått (mm)*</h3>
                <div class="shape" id="plan1_shape">
                    <h2>
                        Plan 1
                    </h2>
                </div>
                <div class="shape" id="plan2_shape">
                    <h2>
                        plan 2
                    </h2>

                </div>  
                <div class="shape" id="plan3_shape">
                    <h2>
                        Plan 3
                    </h2>
                </div>

                <div class="shape" id="plan4_shape">
                    <h2>
                        Plan 4
                    </h2>
                </div>
                <div id="step3_p2">
                    <h3>3.2. Välj bänkskivans kantbehandling</h3>
                    <p><input type="checkbox" name="measures_show"/>Välj kantprofil samt bearbetnig av synliga kanter från ritningen ovan.</p>
                        <div class="plan_select">
                            <h3>Tiles - Selected</h3>
                            <?php bank_select("SELECT * FROM bankskivans WHERE typeID = 0"); ?>
                        </div>
                </div>
            </div>

---

由于您使用的是单选按钮，因此只能存在一个选中的单选按钮

function process_step2(){

    divName = $(":checked").val(); //get the name of the phase you want to show
    $(".phases").hide();    //hide all phases initially
    $("#"+divName).show();  //only show the phase that you want to show
});

---

因此，如果遵循我的示例，您需要为每个阶段指定一个类名，如

class=“phases”

。然后将它们全部隐藏，然后只显示要显示的一个。

因为您使用的是单选按钮，所以只能存在一个选中的单选按钮

function process_step2(){

    divName = $(":checked").val(); //get the name of the phase you want to show
    $(".phases").hide();    //hide all phases initially
    $("#"+divName).show();  //only show the phase that you want to show
});

因此，如果遵循我的示例，您需要为每个阶段指定一个类名，如

class=“phases”

。然后将它们全部隐藏，然后只显示要显示的一个。

尝试，在processStep2（）中

如您所说..在平面1上单击平面1\u形状将显示平面2单击平面2\u形状将显示等

尝试，在流程步骤2中（）

如您所说..在平面1上单击平面1\u形状将显示平面2单击平面2\u形状将显示等

---

你链接了空白的JSFIDdle，谢谢你告诉我。@ChriChri我们也需要你发布你的html，如果我们能够将id和类名链接到具体的dom元素，那么就更容易理解和了解需要发生什么。可能是相关的css以及您正在添加和删除的类。可能b更正是1）do

$（'input[name=plan]：checked'）.val（）

而不是

$（.radio”）.value.is（“：checked”）

和do

$（“#plan1_shape”）[0]。样式…

@ChriChri我直到现在才看到您的JSFIDLE，我的错误操作。那么，您能验证一下，当用户选择第一个单选按钮并单击“提交”按钮时，您希望发生什么不同的事情吗？您链接了空白JSFIDDLE感谢您告诉我。@ChriChri我们也需要您发布html，如果我们能够将id和类名链接到具体的dom元素，那么就更容易理解和了解需要发生什么。可能是相关的css以及您正在添加和删除的类。可能b更正是1）do

$（'input[name=plan]：checked'）.val（）

而不是

$（.radio”）.value.is（“：checked”）

和do

$（“#plan1_shape”）[0]。样式…

@ChriChri我直到现在才看到您的JSFIDLE，我的错误操作。因此，您能否验证，当用户选择第一个单选按钮并单击“提交”按钮时，您希望发生不同的事情？如果我决定交换，如何隐藏显示的第一个div？@ChriChri try

$（'div[class=“shape”]”）。hide（）

在if标记中..让我知道如果它不起作用如果我决定交换，我如何隐藏显示的第一个div？@ChriChri try

$（'div[class=“shape”]”）。hide（）在if标记中..如果不起作用，请告诉我
if ($('input[name=plan]:checked').val()) {
  $('#' + $('input[name=plan]:checked').val() + "_shape")[0].style.display = "block";
}