如何显示/隐藏一个 <div> 当单选按钮被点击时 <div> 有同一个班级？

Question

I have this JavaScript code:

$("#midden-offertes form .subvragen").hide();

$("#midden-offertes form .veld .radio :radio").change(function() 
{
    if (this.value === 'Ja')
    { 
        $("#midden-offertes form .subvragen",this).show()
    }
    else
    {
        $("#midden-offertes form .subvragen",this).hide();
    }
});

I also have a <form> with different radio buttons. When I click on a radio button, the .subvragen <div> must be shown.

But every .radio button has its own .subvragen <div> . How can I change this JavaScript code so that only the .subvragen within each radio button is shown when I click on that radio button?

When I click on a radio button now, all the .subvragen <div> s are shown.

Edit:
I have uploaded the files. You can see them here: http://mikevierwind.nl/karel/offerterelatie.html

Answer 1

Looking at the HTML you've got , you could use the following JavaScript (I think):

$("#midden-offertes form .veld .radio :radio").change(function() 
{
    var $subvragen = $(this).parents('.veld').siblings('.subvragen');

    if (this.value === 'Ja')
    { 
        $subvragen.show();
    }
    else
    {
        $subvragen.hide();
    }
});

Alternatively, if you could add id attributes to your subvragen <div> s and radios, you could use them — it'd make the JavaScript less reliant on the HTML nesting.

Eg if your HTML were like this:

<div id="midden-offertes">
    <form>
        <div class="veld">
            <div class="radio">
                <input name="geoff" id="geoff_1" value="a" />
            </div>
        </div>
        <div class="subvragen" id="subvragen_geoff_1"></div>

        <div class="veld">
            <div class="radio">
                <input name="geoff" id="geoff_2" value="b" />
            </div>
        </div>
        <div class="subvragen" id="subvragen_geoff_2"></div>

        <div class="veld">
            <div class="radio">
                <input name="geoff" id="geoff_3" value="c" />
            </div>
        </div>
        <div class="subvragen" id="subvragen_geoff_3"></div>
    </form>
</div>

Then your JavaScript would go something like this:

$("#midden-offertes form .subvragen").hide();

$("#midden-offertes form .veld .radio :radio").change(function() 
{
    if (this.value === 'Ja')
    { 
        $(".subvragen#subvragen_" + this.id).show()
    }
    else
    {
        $(".subvragen#subvragen_" + this.id).hide();
    }
});