Why can't I get the status of this radio button in jquery?

Question

I have this piece of code from a salesforce visualforce page.

<div id="testId" class="row mb25 mt15">
    <div class="col-md-6 plr0">
        <p class="en">Would you like to add a co-applicant?<span class="asteriskField">*</span> </p>
        <p class="fr">Would you like to add a co-applicant?<span class="asteriskField">*</span> </p>
    </div>
    <div class="col-md-4 mt-5r">
        <apex:selectRadio id="innerTestId" value="{!client.Would_you_like_to_recieve_future_promo__c}" styleClass="radio">
            <div class="row">
                <div class="col-sm-6">
                    <div class="radio pa-cus">
                        <apex:selectOption itemLabel="Yes" itemValue="Yes"/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="radio pa-cus">
                        <apex:selectOption itemLabel="No" itemValue="No"/>
                    </div>
                </div>
            </div>
        </apex:selectRadio>
    </div>
</div>

When the Submit button is clicked I need to have a JQuery script to check weather the radio button is selected Yes or No so that I can perform some custom validation. I call this function by adding onclick="validateInnerTestId();" to Submit button.

My problem is that I am unable to read/check whether the radio button is chosen Yes or No or True or False. If I can find out what state they are in then I can do my

Here is my goal

<script type="text/javascript">
<script>                                                                                 
    function validateInnerTestId()
    {
        if(innerTestId is Selected as Yes)
        {
            execute fucntionX()
        }
        else
        {
            execute functionY()
        }
    }
<script>  

Here is some examples of how I have tried to read the value of the radio button:

alert($("#innerTestId").itemValue()); this line doesn't return anything

alert($("#innerTestId").val()); this line also doesn't return anything

and this if else always return no

if ($('innerTestId').is(':checked'))
{
    alert("yes");
}
else
{
    alert("no");
}

Does anyone has any idea on how to check for the radio button in this case? Thanks

Answer 1

As @Andrea mentioned in the comments, you simply forgot the # in your selector. There is a simple example below demonstrating the usage. If your code still isn't working we will need more info.

• Are you sure validateInnerTestId() is being called?
• How is it being called?

 $('#doit').on('click',function() { var str = ""; if ($('#test').is(':checked')) { str += "Toggle checked? YES\\n" } else { str += "Toggle checked? NO\\n" } if ($('#option1').is(':checked')) { str += "Option checked: 1"; } else if ($('#option2').is(':checked')) { str += "Option checked: 2"; } else { str += "Option checked: NONE"; } alert(str); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input id="test" name="toggle" type="checkbox" value="" /> <label for="toggle">Toggle</label> </div> <div> <input type="radio" id="option1" name="options" value="1"> <label for="option1">Option 1</label> <input type="radio" id="option2" name="options" value="2"> <label for="option1">Option 2</label> </div> <br /> <input id="doit" type="button" name="test" value="Tell me!" /> 

It might also be something to do with the ASP/SalesForce implementation? Perhaps some of the answers in this question might help: How to check if an option is selected?

Answer 2

VF tags use dynamic ids, you should do following:

function validateInnerTestId(){
   if($('#{!component.innerTestId}').is(':checked')){
       execute fucntionX()
   }
   else{
       execute functionY()
   }
}