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

Question

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

我正在尝试 显示/隐藏 div ('requestDetails') 如果 [=34 的第一个或第二个=] 变量 单选按钮的范围被选中 （这样做的原因是我想避免硬编码特定值来检查）。

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

我试图避免在单选按钮上使用 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

如果我是你，我会用一个新的 class 来确定你想用作此 show/hide 事件触发器的按钮。然后将事件附加到按钮的这个 class 上。这不会增加太多代码开销。

示例：

<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 或任何其他没有 class 的按钮则不会。

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/

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

jQuery: show / hide Div when first or second radio button is selected

javascript

jquery

show-hide