jQuery：选择第一个或第二个单选按钮时显示/隐藏Div

Question

我是jQuery的新手，希望这里的人可以帮助我。

我正在尝试显示/隐藏div （ 'requestDetails' ）， 如果 选择 了可变范围的单选按钮 的第一或第二 （其原因是我想避免对要检查的特定值进行硬编码）。

到目前为止，我只有一个硬编码的解决方案，但这不能正常工作，而且我不确定如何在没有此解决方案的情况下仅解决第一个和第二个单选按钮。

我试图避免在单选按钮上使用ID或其他类来减少代码，但是如果建议可以添加此代码。

我的jQuery：

$('[name=requestType]').on('change', function(){
    if( ($('[name=requestType]').val() == 'value1') || ($('[name=requestType]').val() == 'value2') ){
        $('#requestDetails').show();
    }else{
        $('#requestDetails').hide();
    }
});

我的HTML：

<input type="radio" name="requestType" value="value1" />Value1  
<input type="radio" name="requestType" value="value2" />Value2  
<input type="radio" name="requestType" value="value3" />Value3  
// ...
<div id="requestDetails" class="hidden"> ... </div>

迈克非常感谢您的任何帮助，迈克

Answer 1

尝试

$('[name=requestType]').on('change', function () {

    $('#requestDetails').toggle((this.value == 'value1' || this.value == 'value2'));

});

DEMO

Answer 2

如果我是您，我将使用新的类来确定要用作此显示/隐藏事件的触发器的按钮。 然后将事件附加到此类按钮。 这不会增加太多代码开销。

例：

<input type="radio" class="special" name="requestType" value="value1" />Value1  
<input type="radio" class="special" name="requestType" value="value2" />Value2  
<input type="radio" name="requestType" value="value3" />Value3  


$('.special').on('change', function(){
    if( ($('[name=requestType]').val() == 'value1') || ($('[name=requestType]').val() == 'value2') ){
        $('#requestDetails').show();
    }else{
        $('#requestDetails').hide();
    }
});

这将导致按钮1和按钮2使用id = requestDetails影响div，而按钮3或任何其他没有该类的按钮则不会。

Answer 3

如果不进行硬编码，则使用包含输入的父项，并使用：nth-​​child选择器。 参见jsfiddle例如：

$('[name=requestType]').on('change', function () {
    if($('#parent input:nth-child(2)').val() == $(this).val() ||$('#parent input:nth-child(3)').val() == $(this).val())
    $('#requestDetails').toggle();
});

http://jsfiddle.net/cwahL1tz/11/

还用您想要获得的确切行为制作了一个： http : //jsfiddle.net/cwahL1tz/13/