Переключить проблему с флажком

Question

Пожалуйста, найдите код ниже

$("#chkCopy").toggle(function () {
   copyDetails(); 
},
function () {
   emptyCopyDetails();
});

// functions which do not have any effect on the checkbox
function copyDetails() {

}

function emptyCopyDetails() {
}

Проблема в том, что флажок не показывает проверенное состояние.

Демо

Заранее спасибо

Answer 1

.toggle() прерывает проверку, поскольку .toggle() фактически вызывает e.preventDefault() в событии click под .Вместо этого подхода, я бы порекомендовал что-то вроде этого:

$("#chkCopy").change(function () {
  if(this.checked) {
    copyDetails();
  } else {
    emptyCopyDetails();
  }
});

Вот обновленная / рабочая версия вашей демонстрации с вышеупомянутым подходом .

Answer 2

$("#chkCopy").change(function () {                alert("1");

            },
            function () {
                alert("2");
            });

использовать изменение вместо переключателя

Answer 3

Из документации :

Поскольку .toggle() внутренне использует нажмите обработчик, чтобы сделать свою работу, мы должны уберите click чтобы удалить поведение прикреплен с .toggle(), так что другие click обработчики могут быть пойманы в перекрестный огонь. Реализация также звонит .preventDefault() на мероприятие, поэтому ссылки не будут следовать и кнопки не будут нажиматься , если .toggle() был вызван на элемент.

Так что вы не можете использовать toggle(), если хотите, чтобы флажок был отмечен и снят. Вы можете использовать click() вместо:

$("#chkCopy").click(function() {
   if (this.checked) {
       copyDetails();
   } else {
       emptyCopyDetails();
   }
});

Answer 4

взгляните на этот ответ, вы бы сделали то же самое

Событие переключения Jquery связано со значением флажка