Question

我正在尝试构建与此类似的东西，http://www.tutorialrepublic.com/faq/show-hide-divs-based-on-radio-button-selection-in-jquery.php，区别在于选择单选按钮后，我还需要按下提交按钮以显示与该特定按钮一起使用的div。如果客户改变主意，我该如何交换显示的div？

JS小提琴https://jsfiddle.net/nag0vdut/

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>

Jquery的

var tile, plan;

function _(x) {
    return document.getElementById(x);
}

function processStep2() {
    plan = _("plan").value;
    if ($(".radio").is(":checked")) {
        _("step2").style.display = "none";
        _("step3").style.display = "block";
        /* section I am having issues with */
        if ($(".radio").value.is(":checked") == "plan1") {

            $("#plan1_shape").style.display = "block";

        } else {
            alert("wrong window");
        }
        $("#phase2").removeClass("phase");
        $("#phase3").removeClass("main_list");
        $("#phase2").addClass("main_list");
        $("#phase3").addClass("phase");
    } else {
        alert("chose radio button")

    }
}

Answer 1

由于您使用的是radiobuttons，因此只能检查一个radiobutton。

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"的类名。然后隐藏它们全部，然后只显示你想要显示的那个。

Answer 2

在processStep2（）

中尝试

if ($('input[name=plan]:checked').val()) {
  $('#' + $('input[name=plan]:checked').val() + "_shape")[0].style.display = "block";
}

如你所说..在计划1点击plan1_shape将显示plan2点击plan2_shape将显示等..

demo

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

2 个答案: