Question

I’m new to Web development and jQuery.
I’m trying to build an ASPX page with two RadioButton controls that must perform the following actions:

On page load, one of the two must be selected depending on a flag from an object on the ASPX page. Lets call it customer.Id. If the Id is true, select RadioButton one must be set else select RadioButton 2 must be set.

At any point after page load the user selects a RadioButton, the other must be deselected.

When RadioButton two is clicked, hide a Table named “employee table” and when RadioButton one is clicked, show that Table.

Can anyone please tell me how I can get this functionality in jQuery functions?

Answer 1

Not sure about .NET but in Classic ASP you would write a variable like this <%=customerID%>.

In jQuery, I think you can do something like this:

<input type="radio" id="radio1"> Yes
<input type="radio" id="radio2"> No

<table border="1" id="employeeTable">
    <tr><td>This is the table</td></tr>
</table>

… and then some jQuery:

$(document).ready(function() {
    var customerID = <%=customerID%> // asp variable

    if (customerID != "") {
        $('#radio1').prop('checked', 'checked');
    } else {
        $('#radio2').prop('checked', 'checked');
    }

    $('#radio1').click(function() {
        $('#employeeTable').fadeIn('fast');
    })

    $('#radio2').click(function() {
        $('#employeeTable').fadeOut('fast');
    })
})

You can have a look/play here: http://jsfiddle.net/qcLtX/7/

Try changing the customerID value to nothing, like var customerID = "".

Good luck

UPDATE

Where I have used .prop: If you are using jQuery version 1.6 or greater, you should use .prop, otherwise, use .attr.