JQuery, если флажок установлен, а затем изменить цвет фона

Question

Как изменить цвет фона на флажок, если он установлен.

HTML

 <input type="checkbox" name="somename" id="thisid" checked="checked">

JQuery

 if ($("input[type=checkbox]").is(':checked')){
       $("input[type=checkbox]").css('background','red');
   }

Идеально было бы изменить цвет фона при загрузке. Кто-нибудь может мне помочь с этим?

Answer 1

Если вы хотите стилизовать свой флажок (или связанный ярлык) в зависимости от того, установлен он или нет, вы можете использовать псевдокласс CSS :checked

input[type=checkbox] {
    /** Style for unchecked **/

} 
input[type=checkbox]:checked {
    /** Style for checked **/
} 

Однако, флажки в браузерах обычно не устанавливаются таким образом. Вы должны заменить их псевдо-флажками, то есть пользовательскими элементами, которые просто выглядят как флажки, скрывая фактические флажки.

Может быть, посмотрите здесь .

Answer 2

Убедитесь, что вы делаете, когда дом готов. Просто прокрутите их и проверьте.

$(function() {
    $("input[type=checkbox]").each({
        if($(this).is(':checked')) {
            $(this).css('background-color', 'red');
         }
    });
})

Answer 3

Ваш код в порядке. Скорее всего, это не работает при загрузке, потому что вы не завернули код в «готовую» функцию. Чтобы затем изменить цвет фона отмеченных флажков, вам нужно связать css с вашим запросом.

// this wrapper waits until the DOM has loaded before executing the code inside
$(function() {
  $("input[type=checkbox]:checked").css('background-color', 'red')
})

Если вы ожидали, что цвет фона изменится при переключении флажков, вам также потребуется настроить событие.

// this wrapper waits until the DOM has loaded before executing the code inside
$(function() {
  var checkboxes = $("input[type=checkbox]")

  // set the styles based on the initial state on load
  checkboxes.is(':checked').css('background-color', 'red')

  // update the styles as the checkbox states are changed
  checkboxes.on('change', function() {
    var checkbox = $(this)

    checkbox.css('background-color', checkbox.is(':checked') ? 'red' : 'transparent'))
  })
})

input[type='checkbox'] {
  -webkit-appearance: none; /* necessary to override checkbox styles on OSX and iOS */
  width: 20px;
  height: 20px;
  background: grey;
}

input[type='checkbox']:checked {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox">

ПРИМЕЧАНИЕ. Флажки и радиостанции имеют жестко заданные стили во многих браузерах на iOS и OSX. Чтобы явно переопределить это, вам нужно использовать appearance: none (в данном случае -webkit-appearance для Chrome и Safari), чтобы ваши стили могли переопределить настройки браузера по умолчанию.