Хороший способ сделать это - который не нуждается в javascript - это использовать переключатели, но сделать их невидимыми. Кликабельный текст и значок располагаются внутри метки для каждой радиокнопки, поэтому вы можете щелкнуть метку или значок, чтобы выбрать радиокнопку.
Это обеспечивает несколько важных вещей:
- Может быть выбран только один элемент
- Выбор передается обратно с формой
- Обработка форм в браузере все еще работает
- Опции доступности все еще работают
Вы должны быть осторожны, чтобы сделать ярлыки явно кликабельными, поскольку вы теряете визуальную подсказку о наличии видимых переключателей.
IE6 & 7 также требуют взлома - у них странное поведение, при котором отображение: нет или видимость: скрытый переключатель или флажок нельзя выбрать, щелкнув его метку.
Вот пример: http://www.spookandpuff.com/examples/clickableToggles.html
(я не включил значки - вы можете легко добавить их, установив их в качестве фона в CSS для каждого элемента (не используйте теги <img>).
Редактировать О, боже, я просто правильно прочитал вопрос! Извините, вы хотите, чтобы поведение было «выбирать», а не «выбирать и отправлять» ... Простой способ сделать это - добавить некоторый javascript во входные данные, чтобы они автоматически отправляли формы, когда они выбраны. Я обновил пример, чтобы показать это.