HTML复选框的酷替代品

Question

确定不仅仅是复选框，还有单选按钮。问题是我有一个数以万计的支票盒和盒子。我表格上的单选按钮和它看起来很难看。

这不是功能问题，而是纯粹的UI问题。我正在寻找一些更酷的方法来实现相同的任务。

哦，我正在使用jQuery 1.4.3

更新：我得到了这个jQuery Plugin。这很棒！！谢谢大家...... 附上我现在使用的截图。我喜欢这个，因为它看起来像iPhone风格，但不是一个确切的克隆。

Answer 1

下拉菜单是否可以替换许多复选框/单选按钮？您可以启用多个选择来重新选择复选框行为。一般来说，如果我在同一主题上有一个或两个以上的复选框，那就是我会做的...

或者你是说他们是分开的事情？在这种情况下，您是否可以发布一些关于您试图从用户那里获得哪些信息的想法？

Answer 2

这比更改编辑字段的边框稍微高级一些。最好的方法是隐藏checkbox / radiobutton并用虚拟元素替换它。这种方法的问题是保持两个元素同步。 radiobutton-image需要知道何时检查了另一个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重新设置复选框/单选按钮的外观（就像任何其他表单元素一样，如按钮）。