Как изменить фон флажка с помощью JavaScript

Question

В моей форме есть три флажка. Я хотел бы изменить цвет фона флажков, когда установлен. Можно ли написать один скрипт для всех флажков в моей форме?

Answer 1

Изменение цвета фона флажков не согласовано во всех браузерах.

Посмотрите на эту ссылку , чтобы узнать, как они будут выглядеть.

Если вы хотите изменить цвет фона и обеспечить его постоянную работу, вам лучше рассмотреть расширение JavaScript-форм.

Эта ссылка содержит несколько: 25 + плагинов jQuery, которые улучшают и украшают элементы HTML-формы , и Google предоставит гораздо больше.

---

РЕДАКТИРОВАНИЕ: Если вы делаете хотите обойти это с помощью jQuery, вы можете использовать wrap() и unwrap() добавить цветной span вокруг флажка. Это не изменит фон самого флажка, но обеспечит надежную визуальную обратную связь.

$('input[type=checkbox]').click(function() {
    $(this).unwrap().filter(":checked").wrap("<span class='selected'>");
});

ДЕМО РАБОТЫ

Answer 2

Вместо того, чтобы использовать CSS / Javascript для изменения фона флажка, который будет иметь проблемы с кроссбраузерностью (как указывало @Town), я бы порекомендовал использовать элемент управления Toggle Button из набора инструментов ASP.NET Ajax Control Toolkit. Затем используйте изображение с установленным флажком (экран печати или с рисунком, если хотите), и то же изображение без флажка.

http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ToggleButton/ToggleButton.aspx

Этот элемент управления использует элемент управления CheckBox, поэтому у вас также будут все обычные функции ASP.NET CheckBox

Answer 3

ASP.NET разметка:

<asp:CheckBox runat="server" ID="checkBox" />

Использование jQuery:

$('#checkBox') // select by id
    .css('backgroundColor', value); // set value

Answer 4

Это именно то, что нужно сделать jQuery .