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

Я использую событие переключения Jquery, чтобы делать некоторые вещи, когда пользователь нажимает флажок, например:

$('input#myId').toggle(
function(){
//do stuff  
},
function(){
//do other stuff    
}
);

Проблема в том, что флажок не отмечен, когда я нажимаю на флажок. (Все, что я положил в событие переключения, работает должным образом.)

Я пробовал следующее:

$('input#myId').attr('checked', 'checked');

а также

$(this).attr('checked', 'checked');

и даже просто

return true;

Но ничего не работает. Может кто-нибудь сказать мне, где я иду не так?

Редактировать - спасибо всем, кто ответил. Ответ Дреаса почти сработал для меня, за исключением части, которая проверяла атрибут. Это работает отлично (хотя это немного хакерский)

$('input#myInput').change(function ()
{
    if(!$(this).hasClass("checked"))
    {
        //do stuff if the checkbox isn't checked
        $(this).addClass("checked");
        return;
    }

    //do stuff if the checkbox isn't checked
    $(this).removeClass('checked');
});

Еще раз спасибо всем, кто ответил.

10.12.2008 10:34:22
Он физически не отображается в браузере как проверяемый при нажатии на него, или просто ваше событие не запускается?
J Cooper 10.12.2008 10:42:08
Событие срабатывает правильно, и выполняется весь правильный код, но флажок просто не проверяется! Если я публикую значения из формы, значение флажка также не будет опубликовано.
John McCollum 10.12.2008 10:48:47
Вместо использования addClass, hasClass и removeClass используйте toggleClass.
Ballsacian1 13.04.2010 06:33:55
10 ОТВЕТОВ
РЕШЕНИЕ

Используйте changeсобытие вместо toggleсобытия, например:

$('input#myId').change(function () {
    if ($(this).attr("checked")) {
        //do the stuff that you would do when 'checked'

        return;
    }
    //Here do the stuff you want to do when 'unchecked'
});
52
5.04.2010 05:59:38
Спасибо за ваш вклад, но мне пришлось добавлять и удалять классы, а не проверять атрибуты - по какой-то причине я не мог заставить это работать. Я выложу полное решение (по крайней мере, что работало для меня) выше. Еще раз спасибо!
John McCollum 10.12.2008 12:19:31
Я всегда задавался вопросом о практической разнице между == и === ... что насчет такого сравнения делает === необходимым?
Jay Corbett 10.12.2008 14:33:42
'==' выполняет приведение типа (преобразование), то есть компилятор будет неявно пытаться преобразовать значения. Например, [1 == true // true], потому что он преобразует 'true' в 1 ... но [1 === true // false], потому что число не равно логическому
Andreas Grech 10.12.2008 19:54:58
вместо $ (this) .attr («проверил») вы можете просто вызвать this.checked и он вернет проверенное значение
Sergey 25.01.2010 02:42:22
if ($ (this) .is (: checked)) // лучший способ проверки
kasp3r 2.12.2010 09:05:58
$('input#myId').toggle(
  function(e){
    e.preventDefault();
    //do stuff      
    $(this).attr('checked', 'true');
  },
  function(e){
    e.preventDefault();
    //do other stuff        
    $(this).attr('checked', 'false');
  }
);
1
10.12.2008 10:55:05

Хотя использование changeобработчика событий, предложенного Дриасом Гречем, уместно, он не работает должным образом в IE 6 и 7, который не запускает changeсобытие до тех пор, пока фокус не станет размытым (то есть до тех пор, пока вы не нажмете вне области флажка). , Как говорит QuirksMode , «это серьезная ошибка».

Возможно, вы захотите использовать clickобработчик событий, но это не будет работать с клавиатурной навигацией. Вам keyupтоже нужно зарегистрировать обработчик ...

Смотрите также этот связанный вопрос .

Я еще не нашел хорошего кросс-браузерного решения, которое бы поддерживало как щелчки мышью, так и активацию флажков (и не запускало слишком много событий).


Что касается вашего решения для проверки, установлен ли флажок или нет, вместо добавления вашего собственного checkedкласса вы можете использовать checkedатрибут HTML :

$('input#myInput').change(function () {
    if ($(this).attr("checked")) {
        //do stuff if the checkbox is checked
    } else {
        //do stuff if the checkbox isn't checked
    }
});

Любой браузер устанавливает checkedатрибут inputэлемента равным значению, "checked"если флажок установлен, и устанавливает его null(или удаляет атрибут), если флажок не установлен.

18
23.05.2017 12:30:28

Я сделал похожий подход, но просто использовал проверенный атрибут, такой как

 //toggles checkbox on/off
    $("input:checkbox").change(
        function(){
           if(!this.checked){
             this.checked=true;
           }
           else{
             this.checked=false;
           }
         }
       );
 //end toggle
0
31.07.2009 21:41:55

Попробуйте использовать не-jquery функцию:

function chkboxToggle() {
  if ($('input#chkbox').attr('checked'))
    // do something
  else
    // do something else
}

тогда в вашей форме:

<input id="chkbox" type="checkbox" onclick="chkboxToggle()" />
0
2.03.2011 15:11:22

Это ответ от MorningZ (я нашел его здесь ), который имеет смысл:

Часть, которую вам не хватает, это то, что «флажок» является объектом jQuery, а не объектом DOM флажка

так:

checkbox.checkedобязательно будет ошибка, потому что нет .checkedсвойства объекта jQuery

так:

checkbox[0].checked будет работать, поскольку первый элемент в массиве jQuery - это сам объект DOM.

Так что в вашей change()функции вы можете использовать

$(this)[0].checked
2
17.08.2012 14:22:35

у меня это сработало ............ проверь

$(":checkbox").click(function(){
if($(this).attr("id").split("chk_all")[1])
 {
  var ty  = "sel"+$(this).attr("id").split("chk_all")[1]+"[]";
  if($(this).attr("checked"))
   {
    $('input[name="'+ty+'"]').attr("checked", "checked");
   }
  else
   {
    $('input[name="'+ty+'"]').removeAttr("checked");
   }
 }
})
1
3.09.2010 14:05:07

Пытаться:

$(":checkbox").click(function(){
  if($(this).attr("checked"))
   {
    $('input[name="name[]"]').attr("checked", "checked");
   }
  else
   {
    $('input[name="name[]"]').removeAttr("checked");
   }
})
0
2.03.2011 15:11:34

почему бы не использовать $ .is ()?

$('input#myId').change(
    function() {
        if ($(this).is(':checked')) {
            // do stuff here 
        } else {
            // do other stuff here
        }
});
8
7.10.2010 10:48:45
    $("input[type=checkbox][checked=false]")// be shure to set to false on ready
    $("input#Checkbox1").change(function() {
        if ($(this).attr("checked")) {
            $("#chk1").html("you just selected me")//the lable
        } else {$("#chk1").html("you just un selected me") }    
    });
0
3.12.2010 01:10:14
работает для меня, и я использую его, чтобы проверить, прежде чем применить некоторую логику. Очень удобно предоставлять обратную связь с пользователем
philljohn 3.12.2010 01:13:15