Как получить проверенное значение переключателя, когда контейнер видим, используя jquery

Question

У меня есть 3 div, как показано ниже, с 2 переключателями в каждом div. Я пытаюсь получить значение установленного переключателя в элементе div, который показывает ie. имеет display: block.

<div class="details" style="display: none;">
<input id="r1" name="room" type="radio" value="1">
<input id="r2" name="room" checked type="radio" value="2">
</div>

<div class="details" style="display: block;">
<input id="t1" name="room1"checked  type="radio" value="3">
<input id="t2" name="room1" type="radio" value="4">
</div>  

Я знаю, как использовать

$('.details').css('display') == 'block')

, но у меня возникают проблемы при его объединении с

$('input[name=???]:radio:checked').attr('value')

Кто-нибудь знает, как я могу получить проверенное значение только из видимого div?

Answer 1

Использование : видимый

let v = $('.details:visible').find('input:radio:checked').val()
console.log('This is visible checked radio value: ' + v)

$('.details input:radio').change(function(){
  let v = $(this).val();
  console.log('This is clicked radio value: ' + v)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="details" style="display: none;">
  <input id="r1" name="room" type="radio" value="1">
  <input id="r2" name="room" checked type="radio" value="2">
</div>

<div class="details" style="display: block;">
  <input id="t1" name="room1" checked type="radio" value="3">
  <input id="t2" name="room1" type="radio" value="4">
</div>