打開/關閉狀態與表單中的單詞？

Question

做一個重建一個網站，我想給幾個字詞的形式

創建了這個網站，但看着他的代碼是稍微可怕此前開發商內部的「開」和「關」的狀態 - http://www.mediwales.com/news。我正在灰色框中選擇可以選擇扇區的位。

我該如何重新創建？有沒有更現代的方式來做到這一點在jQuery中？我需要它在所有瀏覽器上工作（直到IE7）。

我希望能夠開啓/關閉狀態並將其綁定到表單。

Answer 1

你可以嘗試一個庫，如wijmo（檢查出http://wijmo.com/demo/explore/#formdecorator|overview;你只需要圍繞它繪製一個矩形和改變樣式）。或作爲一個快速和骯髒的解決方案做這樣的事情：

CSS：

.check { display: block; border: 1px solid #000; } 
.check.selected { border: 2px solid red; } 

HTML：

<div class="check" id="biotech-id">Biotechnology</div> 
<div class="check" id="financial-id">financial</div> 

的jQuery：

$('.check').on('click', function(e) { 
    el = $(e.currentTarget); 
    el.toggleClass('selected'); 
    if(el.hasClass('selected')) { 
     input = $('<input type="hidden" name="checkedSectors[]" value="'+ el.attr('id') + '" id="hiddeninput-'+ el.attr('id') +'" />'); 
     el.after(input); 
    } else { 
     $('#hiddeninput-'+ el.attr('id')).remove(); 
    } 
}); 

[對於複選框CSS樣式]的

Answer 2

有很多資源在那裏的來幫助你，但是既然你提到的jQuery，下面的資源可以幫助你：http://tutorialzine.com/2011/03/better-check-boxes-jquery-css/

Answer 3

我找到一個自定義的多用的複選框，選擇最用戶友好的，像在這個網站：http://www.pracuj.pl/（點擊區域或Kategoria）