打开/关闭状态与表单中的单词？

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）