Радио кнопка управления в jquery

Question

Я новичок в веб-разработке и jQuery.
Я пытаюсь создать страницу ASPX с двумя RadioButton элементами управления, которые должны выполнять следующие действия:

При загрузке страницы один изэти два должны быть выбраны в зависимости от флага объекта на странице ASPX.Давайте назовем это customer.Id.Если Id имеет значение true, выберите RadioButton один должен быть установлен, иначе выберите RadioButton 2.

В любой момент после загрузки страницы пользователь выбирает RadioButton, другой должен быть отменен.

Когда нажата RadioButton two, скрыть Table с именем "таблица сотрудников", а когда нажата RadioButton one, показать, что Table.

Может кто-нибудь подсказатькак я могу получить эту функциональность в функциях jQuery?

Answer 1

Не уверен насчет .NET, но в Classic ASP вы бы написали переменную, подобную этой <% = customerID%>.

В jQuery, я думаю, вы можете сделать что-то вроде этого:

<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>

... а затем немного 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');
    })
})

Вы можете посмотреть / поиграть здесь: http://jsfiddle.net/qcLtX/7/

Попробуйте изменить значение customerID на ничто, например var customerID = "".

Удачи

UPDATE

Где я использовал .prop: Если вы используете jQuery версии 1.6 или выше, вы должны использовать .prop, в противном случае используйте .attr.

Answer 2

Радиокнопки сгруппированы по их атрибуту name , вот так ( source ).

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

Если переключатели сгруппированы, выбор любой из них автоматически отменяет выбор всех остальных в этой группе.

Таким образом, кнопки не могут иметь различного названия.Если вы хотите различать переключатели (не ссылаясь на их значение), вы должны добавить идентификатор.

<input type="radio" name="sex" id="m" value="male" />

Вы можете установить выбранный переключатель на загрузку страницы декларативно в разметке или с помощью jquery.

Декларативная версия:

<input type="radio" checked="checked" name="sex" value="male" />

jQuery:

$(document).ready(function(){
    $("#m").attr("checked", "checked");
});