jQuery: show/hide Div, когда выбрана первая или вторая радиокнопка

Question

Я новичок в jQuery и надеюсь, что кто-то здесь может мне помочь.

Я пытаюсь показать/скрыть DIV ('requestDetails') если первый или второй из переменной диапазона радиокнопок выбирается (причина этого заключается в том, что я хотел бы избежать Аппаратно кодирование конкретных значений для проверки).

До сих пор у меня было только жестко закодированное решение, но это не работает должным образом, и я не уверен, как обращаться только к первому и второму переключателю без этого.

Я попытался избежать использования идентификаторов или дополнительных классов на переключателях для уменьшения кода, но может добавить это, если это рекомендуется.

Мой 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

Если бы я тебя, я бы идентифицировать кнопки вы хотели бы использовать в качестве триггеров для этого шоу/скрыть событие с новым классом. Затем присоедините событие к этому классу кнопки. Это не добавляет большого количества накладных расходов кода.

Пример:

<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 влияя на DIV с ID = requestDetails, в то время как кнопка 3 или любые другие без класса не будет.

Answer 2

попробовать

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

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

}); 

DEMO

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/