Question

I’m using the code from this page http://jsfiddle.net/gnQUe/170/

jquery slide toggle as a form checkbox

how can i use multiple such switches in a single page, if I’m using the same script & css

Answer 1

First of all, put the hidden input in the same div as the controls, and give it a class instead of an id:

<div class="slider-frame">
    <span class="slider-button">NO</span>
    <input type="hidden" class="slider-value" value="false">
</div>

Then use this jQuery to change it’s value:

$('.slider-button').toggle(function() {
    $(this).addClass('on').html('YES');
    $(this).next(".slider-value").val(true);
}, function() {
    $(this).removeClass('on').html('NO');
    $(this).next(".slider-value").val(false);
});

Example fiddle

You’ll see in the fiddle I’ve left the inputs as text so you can see the value changing.