Событие jquery toggle возится со значением флажка

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

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

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

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

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

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

и даже просто

return true;

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

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

$('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');
});

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

Ответ 1

Используйте событие 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'
});

Ответ 2

При использовании подходящего обработчика событий change, предложенного Dreas Grech, он не очень хорошо работает в IE 6 и 7, который не запускает событие change до тех пор, пока фокус не будет размытым (то есть до вы щелкаете за пределами области флажка). Как QuirksMode говорят, что "это серьезная ошибка".

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

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

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

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

$('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 (или удаляет атрибут), если флажок не установлен.

Ответ 3

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

$('input#myId').change(
    function() {
        if ($(this).is(':checked')) {
            // do stuff here 
        } else {
            // do other stuff here
        }
});

Ответ 4

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

Часть, которую вам не хватает, заключается в том, что "флажок" является объектом jQuery, а не checkbox Объект DOM

так:

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

так:

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

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

$(this)[0].checked

Ответ 5

$('input#myId').toggle(
  function(e){
    e.preventDefault();
    //do stuff      
    $(this).attr('checked', 'true');
  },
  function(e){
    e.preventDefault();
    //do other stuff        
    $(this).attr('checked', 'false');
  }
);

Ответ 6

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

$(":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");
   }
 }
})

Ответ 7

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

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

Ответ 8

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

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

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

<input id="chkbox" type="checkbox" onclick="chkboxToggle()" />

Ответ 9

Try:

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

Ответ 10

    $("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") }    
    });