HTML复选框的酷炫替代方案

Question

好的，不仅仅是复选框，还有单选按钮。问题在于我的表单上有许多复选框和单选按钮，看起来非常丑陋。

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

哦，我正在使用jQuery 1.4.3

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

- Srikar Appalaraju

---

嗯，你给这篇文章打了jQuery UI的标签。难道你不是在使用jQuery UI的单选框和复选框吗？它们看起来很棒...除非你可能打错了标签？ - Stephen

这并不总是“同样的任务”。你需要更具体地说明。 - Ignacio Vazquez-Abrams

“同样的任务”，就像复选框和单选按钮所做的那样。没有功能上的改变。我只是对更好的呈现方式感兴趣……也就是用户界面(UI)。 - Srikar Appalaraju

@ Stephen，jQuery提供的复选框和单选按钮可以确保它们在所有浏览器中的外观是统一的（丑陋的）。 这不是普通控件更好看的替代品... - Srikar Appalaraju

引用 @elusive（来自答案评论）的话：“使用CSS重新设计复选框/单选按钮并尝试保持相同的外观和感觉并不容易。边框、颜色等方面存在问题。如果您知道如何解决此问题，请提供答案或至少一些链接。” - Srikar Appalaraju

Answer 1

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

或者你是指它们关于不同的事情？在那种情况下，您能否发布一些您尝试从用户那里获取的信息的想法？

- Laila Agaev

---

用多选框替换多个复选框是一个有趣的想法。很有道理。+1。 - jwueller

Answer 2

这是比更改编辑字段边框稍微高级一点的任务。最好的方法是隐藏复选框/单选按钮并用虚拟元素替换它。这种方法的问题在于保持两个元素同步。单选按钮图像需要知道另一个单选按钮何时被选中，等等。这需要一些高级事件ping-pong。对于复选框，您可以这样做（未经测试）：

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

- jwueller

Answer 3

您可以始终使用CSS重新设计复选框/单选按钮（就像任何其他表单元素，如按钮）。

- Tom Marthenal

---

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