-1

我有 6 组单选按钮，每组有 3 个选项，还有一个按钮指向下一步。我希望在显示下一步的按钮之前必须选择每个组中的一个单选按钮。默认情况下，下一步的按钮是隐藏的。它涉及一个 wordpress 站点，代码由一个名为 quform 的插件提供

html代码（1组）：

<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>

Javascript代码（6组）：

$(".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();
        }
    });
});
});
4

3 回答 3

0

form用 a或 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>

然后在 jQuery 中：

if ($('#food input[type=radio]:checked')[0] != undefined && $('#pets input[type=radio]:checked')[0] != undefined) {
    $('#btn-step-6').show();
}
于 2013-09-17T08:10:06.723 回答
0

您可以尝试 jsfiddle 示例（http://jsfiddle.net/Lt92r/），我希望这会有所帮助。

$(".test input[type=radio]").click(function(){
    $(this).parent("div").find(".btn").css("display","block");
});
于 2013-09-17T10:05:09.777 回答
0

尝试这个： 

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

在 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");
}
于 2013-09-17T08:07:23.807 回答