两个单选按钮，一个 div -- 通过两个单选按钮选择有条件地切换一个 div

Question

我正在尝试通过两个单选按钮切换一个 div。如果任一问题 (emStudent & anotherDegree) 或两个问题的值为 "Yes"，则 div (#student-discount-wrap) 出现。如果 emStudent 值为 "Yes,"，我可以使用它，但我不确定如何为 anotherDegree 设置 "or" 条件。我试过几个||声明，但无法使任何工作正常进行。帮助我！ :(

这是我的 html：

    <div class="form-group row">
    <label class="col-sm-12"  for="emStudent"><strong>Are you a student:</strong></label><br/>
    <div class="radio col-sm-12">
        <label><input type="radio" class="cbct-radio" name="emStudent" value="Yes" id="emYes">Yes</label>
    </div>

    <div class="radio col-sm-12">
        <label><input type="radio" class="cbct-radio" name="emStudent" value="No" id="emNo">No</label><br/>
        <label for="emStudent" class="error"></label>
    </div>
</div>

    <div class="form-group row">
        <label class="col-sm-12"  for="anotherDegree"><strong>Are you a student at another degree or certificate-granting program:</strong></label><br/>
        <div class="radio col-sm-12">
            <label><input type="radio" class="cbct-radio" name="anotherDegree" value="Yes" id="anotherYes">Yes</label>
        </div>

        <div class="radio col-sm-12">
            <label><input type="radio" class="cbct-radio" name="anotherDegree" value="No" id="anotherNo">No</label><br/>
            <label for="anotherDegree" class="error"></label>
        </div>
    </div><div class="form-group row" id="student-discount-wrap">
        <label class="col-sm-12"  for="studentDiscount"><strong>For Student Discount:</strong> Please list your institution and expected date of graduation (or graduate program). If a student, list your school e_mail address above. Other students may be asked to provide additional documentation.</label><br/>

        <textarea name="studentDiscount" id="studentDiscount" class="form-control col-sm-12 textarea" rows="3"></textarea>
    </div>

这是我用于切换 div 的单选按钮的 JS：

$("input:radio[name='emStudent']").click(function(){ 
        if(this.value == "Yes"){
            $("#student-discount-wrap").show();
        }else{
        // hide the dependent fields and blank them
            $("#student-discount-wrap").hide();
        }
    });

Answer 1

首先选择两个无线电组，然后添加一个 change 事件处理程序，然后查看是否有任何组具有值为 Yes[=15= 的 checked 无线电]

var radios = $("input[type=radio][name='emStudent'], input[type=radio][name='anotherDegree']");

radios.on('change', function() {
    var hasYes = radios.filter(function() {
        return this.checked && this.value === 'Yes';
    }).length > 0;

    $("#student-discount-wrap").toggle(hasYes);
});

FIDDLE

Answer 2

您可以使用另一种简单的方法：

$(".cbct-radio").click(function(){ 
    if($('.cbct-radio[value="No"]:checked').length == 0) { // if no radio with class ".cbct-radio" and value "No" is checked
        $('#student-discount-wrap').show();
    } else {
        $('#student-discount-wrap').hide();
    }
});

两个单选按钮，一个 div -- 通过两个单选按钮选择有条件地切换一个 div

Two radio buttons, One div -- conditionally toggling one div via two radio button selections

forms

jquery

toggle

show-hide

radio-button