HTML复选框的酷替代品答案

【问题标题】：Cool Alternatives to HTML CheckboxHTML复选框的酷替代品
【发布时间】：2011-05-16 17:01:12
【问题描述】：

好的，不仅仅是复选框，还有单选按钮。问题是我的表单上有无数的复选框和单选按钮，它看起来很难看。

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

哦，我使用的是 jQuery 1.4.3

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

【问题讨论】：

嗯，你标记了帖子 jQuery UI。你不是在使用 jQuery UI 单选框和复选框吗？它们看起来很棒...除非您错误地标记了这个问题？
这并不总是“相同的任务”。您将需要更具体。
“相同的任务”，就像复选框和单选按钮所做的那样。没有功能变化。我只是对展示它们的更好方式感兴趣......意思是 UI
@stephen jQuery 提供的确保你的复选框和单选按钮在所有浏览器中看起来一致（丑陋）。它不是比普通的更好看的替代品......
提供屏幕截图或示例可能会改进建议。 “丑”往往不仅仅体现在图形上，还体现在内容的排列和关联上。

标签： jquery html user-interface checkbox radio-button

【解决方案1】：

您始终可以使用 CSS 重新设置复选框/单选按钮的外观（就像按钮等任何其他表单元素一样）。

【讨论】：

其实那并不容易。复选框/单选按钮在各种浏览器中存在边框、颜色等问题。

【解决方案2】：

下拉菜单不能代替许多复选框/单选按钮吗？您可以启用多项选择来重复复选框行为。一般来说，如果我在同一个主题上有超过一两个复选框，我会这样做......

或者你的意思是他们是关于不同的事情？在这种情况下，您能否发布一些关于您试图从用户那里获取什么信息的想法？

【讨论】：

用多选替换多个复选框是一个有趣的想法。说得通。 +1。

【解决方案3】：

这是一项比更改编辑字段的边框更高级的任务。最好的方法是隐藏复选框/单选按钮并将其替换为虚拟元素。这种方法的问题是保持两个元素同步。单选按钮图像需要知道何时检查了另一个单选按钮等。这需要一些高级事件乒乓球。你可以对复选框这样做（未经测试）：

$(':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);
});

【讨论】：