Вот один из примеров / вариантов (более подробно описанных) ToggleButton с использованием jQuery с реализацией <label for="input">.
Сначала мы создадим контейнер для нашей кнопки ToggleButton, используя классические HTML <input> и <label>
.
<span>
<input type="checkbox" value="1" name="some_feature_to_select" id="feature_cb" style="display: none;"> <!-- We can hide checkbox bec. we want <label> to be a ToggleButton, so we don't need to show it. It is used as our value holder -->
<label for="feature_cb" id="label_for_some_feature">
<img alt="Stylish image" src="/images/icons/feature.png">
</label>
</span>
Далее мы определим функцию для переключения нашей кнопки. Наша кнопка на самом деле является обычной <label>, которую мы будем стилизовать для представления переключения значений.
function toggleButton(button) {
var _for = button.getAttribute('for'); // defining for which element this label is (suppose element is a checkbox (bec. we are making ToggleButton ;) )
var _toggleID = 'input#'+_for; // composing selector ID string to select our toggle element (checkbox)
var _toggle = $( _toggleID ); // selecting checkbox to work on
var isChecked = !_toggle.is(':checked'); // defining the state with negation bec. change value event will have place later, so we negating current state to retrieve inverse (next).
if (isChecked)
$(button).addClass('SelectedButtonClass'); // if it is checked -> adding nice class to our button (<label> in our case) to show that value was toggled
else
$(button).removeClass('SelectedButtonClass'); // if value (or feature) was unselected by clicking the button (<label>) -> removing .SelectedButtonClass (or simply removing all classes from element)
}
Функция реализована многоразовым способом. Вы можете использовать его для более чем одной, двух или даже трех созданных кнопок ToggleButton.
... и, наконец, ... чтобы заставить его работать должным образом, мы должны привязать функцию переключения к событию (событию "change") нашей импровизированной кнопки <label> (это будет событие click, потому что не изменяют checkbox напрямую, поэтому событие change не может быть запущено для <label>).
$(document).ready(function(){
$("#some_feature_label").click(function () {
toggleButton(this); // call function with transmitting instance of a clicked label and let the script decide what was toggled and what to do with it
});
$("#some_other_feature_label").click(function () {
toggleButton(this); // doing the same for any other feature we want to represent in a way of ToggleButton
});
});
С помощью CSS мы можем определить backgorund-image или некоторые border, чтобы представить изменение в значении, в то время как <label> сделает для нас работу по изменению значения флажка;).
Надеюсь, это кому-нибудь поможет.