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

Question

Я использую событие переключения 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');
});

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

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

Answer 2

Хотя использование обработчика событий 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 (или удаляет атрибут), если флажок не установлен.

Answer 3

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

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

Answer 4

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

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

так:

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

так:

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

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

$(this)[0].checked

Answer 5

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

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

Answer 6

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

Answer 7

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

Answer 8

Попробуйте:

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

Answer 9

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

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

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

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

Answer 10

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

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