Using jQuery to check if some radio buttons are checked and apply CSS block style.

Question

Hi,

I'm trying to check if one of the following radio buttons is selected and am beginning to think that there must be a better way of achieving the same result using a different jQuery approach.

E.g:

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');

Any ideas?

Additional details:-

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>

Depending on the radio selected from "Do you want to allow users to add Interim Reviews?", certain radio buttons will be displayed.

After Php validates the submission I need to be able to show the UI again and determine which radio buttons are checked, hence the jQuery code originally posted.

Answer 1

you might go for .is()

eg

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

your solution might be

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

maybe you will need to change :checked to :selected
furthermore: you should go for #-selectors if you use ids, due: ids must be unique!

Answer 2

You can use Attribute Starts With Selector

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

and check whether it is 0 or not.

If you can give these checkbooxes a class name then you can use something like

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