В зависимости от того, какие браузеры вы хотите поддерживать, вы можете использовать селектор :checked псевдокласс в дополнение к скрытию переключателей.
Использование этого HTML:
<input type="radio" id="toggle-on" name="toggle" checked
><label for="toggle-on">On</label
><input type="radio" id="toggle-off" name="toggle"
><label for="toggle-off">Off</label>
Вы можете использовать что-то вроде следующего CSS:
input[type="radio"].toggle {
display: none;
}
input[type="radio"].toggle:checked + label {
/* Do something special with the selected state */
}
Например, (чтобы сохранить пользовательскую сводку CSS), если вы используете Bootstrap , вы можете добавить class="btn" к вашим элементам <label> и соответствующим образом оформить их, чтобы создать переключатель, который выглядит следующим образом:
... для которого требуется только следующий дополнительный CSS:
input[type="radio"].toggle:checked + label {
background-image: linear-gradient(to top,#969696,#727272);
box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2),
0 1px 2px rgba(0, 0, 0, 0.05);
cursor: default;
color: #E6E6E6;
border-color: transparent;
text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75);
}
input[type="radio"].toggle + label {
width: 3em;
}
input[type="radio"].toggle:checked + label.btn:hover {
background-color: inherit;
background-position: 0 0;
transition: none;
}
input[type="radio"].toggle-left + label {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
input[type="radio"].toggle-right + label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
Я включил это, а также дополнительные резервные стили в переключателе , переключающем демонстрацию jsFiddle . Обратите внимание, что :checked поддерживается только в IE 9, поэтому этот подход ограничен новыми браузерами.
Однако, если вам требуется поддержка IE 8 и вы хотите использовать JavaScript *, вы можете без проблем создать псевдо-поддержку для :checked (хотя вы также можете легко установить классы прямо на ярлыке). в этот момент).
Использование некоторого быстрого и грязного кода jQuery в качестве пример обходного пути :
$('.no-checkedselector').on('change', 'input[type="radio"].toggle', function () {
if (this.checked) {
$('input[name="' + this.name + '"].checked').removeClass('checked');
$(this).addClass('checked');
// Force IE 8 to update the sibling selector immediately by
// toggling a class on a parent element
$('.toggle-container').addClass('xyz').removeClass('xyz');
}
});
$('.no-checkedselector input[type="radio"].toggle:checked').addClass('checked');
Затем вы можете внести несколько изменений в CSS для завершения:
input[type="radio"].toggle {
/* IE 8 doesn't seem to like to update radio buttons that are display:none */
position: absolute;
left: -99em;
}
input[type="radio"].toggle:checked + label,
input[type="radio"].toggle.checked + label {
/* Do something special with the selected state */
}
* Если вы используете Modernizr, вы можете использовать :selector тест , чтобы определить, нужен ли вам запасной вариант. Я назвал свой тест «selectedselector» в примере кода, и впоследствии обработчик события jQuery настраивается только в случае сбоя теста.