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

时间:2015-01-08 22:00:58

标签: jquery forms radio-button toggle show-hide

我试图通过两个单选按钮切换一个div。如果问题(emStudent& anotherDegree)或两个问题的值是"是"然后出现div(#student-discount-wrap)。如果emStudent的价值是"是的,"我有它的工作。但我不确定如何设置"或"另一个条件是有条件的。我试过了几个||声明,但避风港能够得到任何工作。帮助meeeeee! :(

这是我的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>

这是我的JS用于切换div的一个单选按钮:

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

2 个答案:

答案 0 :(得分:1)

首先选择两个广播组,然后添加change事件处理程序,并查看是否有任何组都有checked广播,其值为Yes

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

答案 1 :(得分:1)

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

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