Прикольные альтернативы HTML-чекбокс

Question

ОК не только флажок, но и переключатель.Дело в том, что у меня в анкете миллионы флажков и переключателей, и это выглядит ужасно чертовски.

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

О, я использую jQuery 1.4.3

ОБНОВЛЕНИЕ: Я получил этот jQuery Plugin для того же.Это круто !!Спасибо всем ... Прикрепил скриншот того, который я сейчас использую.Этот мне понравился, потому что он выглядит как стиль iPhone, но не является точным клоном.

Answer 1

Не работает ли выпадающее меню для замены многих флажков / переключателей?Вы можете включить несколько вариантов выбора, чтобы повторить поведение флажка.Обычно это то, что я бы сделал, если бы у меня было более одного или двух флажков на одну и ту же тему ...

Или вы имеете в виду, что они о разных вещах?В таком случае, не могли бы вы опубликовать некоторое представление о том, какую информацию вы пытаетесь получить от пользователя?

Answer 2

Это немного более сложная задача, чем изменение границы полей редактирования.Лучшим способом было бы скрыть флажок / radiobutton и заменить его фиктивным элементом.Проблема с этим подходом состоит в том, чтобы синхронизировать оба элемента.Изображение радиокнопки должно знать, когда была проверена другая радиокнопка и т. Д. Для этого требуется некоторый расширенный настольный теннис.Вы можете сделать это следующим образом для флажков (не проверено):

$(':checkbox').each(function () {
   var checkbox = $(this),
      fakebox = $(document.createElement('span')).addClass('custom-checkbox');

   // toggle and trigger update of the real checkbox
   fakebox.click(function () {
      checkbox.attr('checked', !checkbox.attr('checked')).change();
   });

   // changes to the real checkbox causes the fake checkbox to update its status
   checkbox.change(function () {
      if (checkbox.attr('checked')) {
         fakebox.addClass('custom-checkbox-checked');
      } else {
         fakebox.removeClass('custom-checkbox-checked');
      }
   });

   // initialize
   checkbox.change().hide();
   fakebox.insertAfter(checkbox);
});

Answer 3

Вы всегда можете перекрасить флажки / переключатели с помощью CSS (как и любой другой элемент формы, например кнопки).