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

如果我是你，我会通过一个新类识别你想用作这个show / hide事件的触发器的按钮。然后将事件附加到此类按钮。这不会增加代码开销。

示例：

<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/

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

3 个答案: