使複選框看起來像按鈕

在我的web應用程序（c＃/ MVC3）中，我在表格中有一大堆複選框。而不是複選框的表格，我希望它看起來像一個切換按鈕的牆。對於用戶而言，我希望它看起來像一堵按鈕，當它們單擊時，它會被「檢查」並且按鈕會改變顏色。使複選框看起來像按鈕

我不確定是否有CSS可以使複選框做到這一點（看起來像一個按鈕，並檢查顏色而不是顯示覆選標記），或者如果我將不得不使用按鈕和JavaScript/jQuery和隱藏複選框或什麼。

2012-12-07 Josh Blade

檢查了這一點 - http://stackoverflow.com/questions/7642277/css-styled-a-checkbox-to-look-like-a-button-is-there-a-hover – lifetimes

不是一個真正的答案你的問題，但我強烈建議不要這樣*。事實上，我對這個主題做了廣泛的可用性測試，幾乎有0％的人注意到複選框，除非它們看起來像本地HTML複選框。我甚至寫了關於這個主題的[博客文章]（http://blog.kitchenpc.com/2012/04/13/the-white-whale-of-usability/）。 –

謝謝user1394965！那正是我所期待的。 –

是的，絕對有可能用純CSS做你想做的事情。

我想你應該檢查出在this問題上提到的jsFiddle。

來源

2012-12-07 22:31:38 lifetimes

jQuery的UI按鈕組件可以處理：

http://jqueryui.com/button/#checkbox

來源

2012-12-07 21:57:52

我認爲從user1394965的評論到我原來的問題的JavaScript是我正在尋找。我在看jQuery UI的演示版，看起來很酷。至少在演示中，它看起來像是爲了選擇多個按鈕，您可以按住Ctrl或Shift點擊，這是我不想要的。 –

當然通過javascript我mess css ... –

收音機按鈕由操作系統生成的，並且不能被容易地樣式。

如果你喜歡不同的東西，你需要使用CSS /圖像和JavaScript來生成它。

來源

2012-12-07 21:58:17

首先，我實際上避免這樣做是出於可用性方面的考慮，但是如果您仍想繼續閱讀。

這實際上很難實現，但它是可能的。我的解決方案避免了將個人ID分配到您的複選框的需要。

基本上，您將需要一個圖像精靈，用於「開」和「關」狀態，您將使用切換類使用CSS背景位置屬性進行定位。然後，下面的jQuery將允許您不僅交換圖像狀態，還可以確認相應的複選框爲已選中或未選中以使用表單。請注意，「實際」複選框從視圖中隱藏，但功能依然存在。

<form> 
    <input type="checkbox" class="custom" /> 
</form> 

<style type="text/css"> 
.checkbox { 
    clear:left; 
    float:left; 
    background:url('your_image'); 
    background-position:top; 
    width:20px; 
    height:20px; 
    display:block; 
} 
.toggled { 
    background-position:bottom !important; 
} 
</style> 

$(document).ready(function() { 
    var checkboxes = $('form .custom'), 
     custom = $('<span></span>').addClass('checkbox'); 
    checkboxes.before(custom); 
    checkboxes.css('visibility', 'hidden'); 
    $('.checkbox').click(function() { 
     $(this).toggleClass('toggled'); 
     var isChecked = $(this).next(':checkbox'); 
     var value = isChecked.prop('checked') ? 'true' : 'false'; 
     if (value == 'false') { 
      isChecked.prop('checked', true); 
     } else { 
      isChecked.prop('checked', false); 
     } 
    }); 
});

當然，您將不得不編輯CSS以滿足您的確切需求。我希望這會有所幫助，因爲這項任務看似不平凡。

來源

2012-12-08 00:01:10 MCM

使複選框看起來像按鈕

回答

相關問題