Использование jQuery, чтобы проверить, установлены ли некоторые переключатели, и применить стиль блока CSS.

Question

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

например:

if($("input[id='incRating_yes']:checked").val()) $('.question4').css('display','block');
if($("input[id='incRating_fro']:checked").val()) $('.question4').css('display','block');
if($("input[id='incRating_both']:checked").val()) $('.question4').css('display','block');

Есть идеи?

Дополнительные детали: -

HTML:

<span class="clearfix">
<label>Do you want to allow users to add Interim Reviews?</label>
Yes <input type="radio" name="interimRev" id="interimRev_yes" value="y" <?php if($interimRev=='y') echo "checked";?>/>
No <input type="radio" name="interimRev" id="interimRev_no" value="n" <?php if($interimRev=='n') echo "checked";?>/>
</span>

<span class="question3" id="question3" style="display:none;">
<label>Include Rating?</label>
<p id="lbl_incRating_no"><input type="radio" name="incRating" id="incRating_no" value="n" <?php if($incRating=='n') echo "checked";?>/> No</p>
<p id="lbl_incRating_yes"><input type="radio" name="incRating" id="incRating_yes" value="y" <?php if($incRating=='y') echo "checked";?>/> Yes</p>
<p id="lbl_incRating_fro"><input type="radio" name="incRating" id="incRating_fro" value="fro" <?php if($incRating=='fro') echo "checked";?>/> Final Review Only</p>
<p id="lbl_incRating_both"><input type="radio" name="incRating" id="incRating_both" value="b" <?php if($incRating=='b') echo "checked";?>/> Both Interim and Final Reviews</p>
</span>

В зависимости от радиоприемника, выбранного из «Вы хотите, чтобы пользователи могли добавлять промежуточные обзоры?», Будут отображаться определенные радиокнопки.

После того, как Php подтвердит отправку, мне нужно будет снова показать пользовательский интерфейс и определить, какие переключатели проверяются, поэтому код jQuery был первоначально размещен.

Answer 1

Вы можете использовать Атрибут начинается с селектора

$("input[id^='incRating_']:checked").length

и проверьте, равен ли он 0 или нет.

Если вы можете дать этим флажкам имя класса, тогда вы можете использовать что-то вроде

$("input:radio.yourclassname:checked").length

Answer 2

вы можете пойти на .is()

например

var element = $('selector');
if (element.is(':checked')) {
   element.css('display', 'block');
}

Ваше решение может быть

if ($('input#incRating_yes').is(':checked')
    || $('input#incRating_fro').is(':checked')
    || $('input#incRating_both').is(':checked')) {
    $('.question4').css('display', 'block');
}

возможно, вам нужно изменить :checked на :selected
более того: вы должны использовать # -селекторы, если вы используете идентификаторы, потому что: идентификаторы должны быть уникальными!