Question

我有6组单选按钮，每组有三个选项，下一步是一个按钮。我希望在显示下一步的按钮之前必须选择每个组中的单选按钮。默认情况下隐藏下一步的按钮。它涉及一个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();
        }
    });
});
});

Answer 1

试试这个：

    <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");
}

Answer 2

使用form或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();
}

Answer 3

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

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

无法隐藏，使用JQuery基于单选按钮选择显示按钮

3 个答案: