Є кілька способів зробити це. Наявність контейнера навколо перемикачів настійно рекомендується незалежно, але ви також можете розмістити клас безпосередньо на кнопках. За допомогою цього HTML:
<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>
Ви можете вибрати за класом:
$(".shapeButton").click(SetShape);
або виберіть за ідентифікатором контейнера:
$("#shapeList").click(SetShape);
У будь-якому випадку подія спрацьовує при натисканні на перемикач або ярлик для нього, хоча, як не дивно, в останньому випадку (Вибір за допомогою "#shapeList"), натискання на ярлик з певних причин двічі активує функцію клацання на мінімум у FireFox; вибір за класом цього не зробить.
SetShape - це функція, і вона виглядає так:
function SetShape() {
var Shape = $('.shapeButton:checked').val();
//dostuff
}
Таким чином, ви можете мати ярлики на своїх кнопках і мати кілька списків перемикачів на одній сторінці, які роблять різні речі. Ви навіть можете зробити так, щоб кожна окрема кнопка в одному списку виконувала різні дії, налаштовуючи різну поведінку в SetShape () на основі значення кнопки.