表单中包含单词的开/关状态？

Question

Doing a rebuild of a website and I want to give several words an "on" and "off" state within a form

The previous developer created this site but looking at his code it's slightly horrific - http://www.mediwales.com/news . I'm doing the bit in the grey box where the sectors can be selected.

How can I recreate this? Is there a more modern way to do this in jquery? I need it to work across all the browsers (down to IE7).

I want to be able to style the on/off states and tie it to the form.

Answer 1

you can try either a library such as wijmo (check out http://wijmo.com/demo/explore/#formdecorator|overview; you'll only need to draw a rectangle around it and alter the style). Or as a quick and dirty solution do something like:

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