Not able to hide, show button based on radio button select using JQuery

Question

I have 6 groups of radio buttons with three choices each and a button to the next step. I want that a radio button in each group must be selected before the button to the next step is displayed. The button to the next step is hidden by default. It concerns a wordpress site and the code is provided by a plugin named: quform

The html code (1 group):

<div class="iphorm-group-row iphorm-clearfix iphorm-group-row-1cols"><div class="iphorm-element-wrap iphorm-element-wrap-radio iphorm_14_12-element-wrap iphorm-clearfix iphorm-labels-above iphorm-element-optional" style="display: block;">
<div class="iphorm-element-spacer iphorm-element-spacer-radio iphorm_14_12-element-spacer">
                <label class="iphorm_14_12-outer-label">Group1</label>
            <div class="iphorm-input-wrap iphorm-input-wrap-radio iphorm_14_12-input-wrap">
        <div class="iphorm-input-ul iphorm-input-radio-ul iphorm_14_12-input-radio-ul iphorm-options-block iphorm-clearfix">
                        <div class="iphorm-input-li iphorm-input-radio-li iphorm_14_12-input-li">
                <label class="iphorm_14_12_1_label">
                    <div class="radio" id="uniform-iphorm_14_12_523933240794b_1"><span><input type="radio" value="Level-1" id="iphorm_14_12_523933240794b_1" name="iphorm_14_12" class="iphorm-element-radio iphorm_14_12 iphorm_14_12_1"></span></div>
                    Level-1</label>
            </div>
                        <div class="iphorm-input-li iphorm-input-radio-li iphorm_14_12-input-li">
                <label class="iphorm_14_12_2_label">
                    <div class="radio" id="uniform-iphorm_14_12_523933240794b_2"><span><input type="radio" value="Level-2" id="iphorm_14_12_523933240794b_2" name="iphorm_14_12" class="iphorm-element-radio iphorm_14_12 iphorm_14_12_2"></span></div>
                    Level-2</label>
            </div>
                        <div class="iphorm-input-li iphorm-input-radio-li iphorm_14_12-input-li">
                <label class="iphorm_14_12_3_label">
                    <div class="radio" id="uniform-iphorm_14_12_523933240794b_3"><span><input type="radio" value="Level-3" id="iphorm_14_12_523933240794b_3" name="iphorm_14_12" class="iphorm-element-radio iphorm_14_12 iphorm_14_12_3"></span></div>
                    Level-3</label>
            </div>
                    </div>
                </div>
    <div class="iphorm-errors-wrap iphorm-hidden">
</div>    </div>

The Javascript code (6 groups):

$(".iphorm_14_12, .iphorm_14_13, .iphorm_14_14, .iphorm_14_15, .iphorm_14_16, .iphorm_14_17").click(function(){
var show = true;

$(".iphorm_14_12, .iphorm_14_13, .iphorm_14_14, .iphorm_14_15, .iphorm_14_16, .iphorm_14_17").each(function () {
    if (!$(this).is(':checked')){
        show = false;
    }

    $(".iphorm_14_12_1, .iphorm_14_12_2, .iphorm_14_12_3, .iphorm_14_13_1, .iphorm_14_13_2, .iphorm_14_13_3, .iphorm_14_14_1, .iphorm_14_14_2, .iphorm_14_14_3, .iphorm_14_15_1, .iphorm_14_15_2, .iphorm_14_15_3, .iphorm_14_16_1, .iphorm_14_16_2, .iphorm_14_16_3, .iphorm_14_17_1, .iphorm_14_17_2, .iphorm_14_17_3").each(function () {

        if (!$(this).is(':checked')) {
            show = false;
        }

        if (show) {
            $('#btn-step-6').show();
        } else {
            $('#btn-step-6').hide();
        }
    });
});
});

Answer 1

Try this:

    <select name="top5" size="3">
      <option onclick="showNextStep(this)">Checkbox</option>
    </select>

in showNextStep(obj):

// The id of the hidden element -> displaly: none
if ($(obj).prop('checked')) {
    $("#nextstep").css('display', "block");
} else {
    // To hide if unselect
    $("#nextstep").css('display', "none");
}

Answer 2

Wrap each radio groups with a form or a div :

<div id="food">
    <input type="radio" name="group1" value="Milk"> Milk
    <input type="radio" name="group1" value="Butter"> Butter
    <input type="radio" name="group1" value="Cheese"> Cheese
</div>

<div id="pets">
    <input type="radio" name="group2" value="Dog"> Dog
    <input type="radio" name="group2" value="Cat"> Cat
    <input type="radio" name="group2" value="Dolphin"> Dolphin
</div>

Then in jQuery:

if ($('#food input[type=radio]:checked')[0] != undefined && $('#pets input[type=radio]:checked')[0] != undefined) {
    $('#btn-step-6').show();
}

Answer 3

You can try jsfiddle example ( http://jsfiddle.net/Lt92r/ ), I hope this will help.

$(".test input[type=radio]").click(function(){
    $(this).parent("div").find(".btn").css("display","block");
});