Блог

Главная - Вопросы по программированию - Флажок не переключается

Флажок не переключается

#javascript #jquery #html

#javascript #jquery ( jquery ) #HTML

Вопрос:

Функция переключения флажка работает только один раз, и после первого экземпляра она не работает. Любая помощь?

Вот jsfiddle: http://jsfiddle.net/66gmK /

 <script>

$(document).ready(function() {
    $(document).on('click','#1',function(){

          $("INPUT[type='checkbox']").each(function(){
    var Checked = $(this).attr('checked');
    $(this).attr('checked', !Checked);
  }); 


    });

});
</script>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <input name="checkbox" type="checkbox"  id="1" value="0" />
    <label for="1" >Toggle All</label>
  </p>
  <p>
    <input name="checkbox" type="checkbox" id="2" value="0" />
  ahmed</p>
  <p>
    <input name="3" type="checkbox" id="3" value="0" />
    <label for="3">omar</label>
  </p>
</form>
</body>

Комментарии:

1. Привет, что-то не так с вашим jquery, я обновил ваш код и посмотрел, то ли это, что вы хотели: jsfiddle.net/66gmK/5

2. да, это сработало, большое спасибо @dunli

Ответ №1:

Переместите Checked переменную из each поскольку this контекст меняется в each, это относится к флажку в цикле, а не к переключающему флажку. Удалите оператор ! not при изменении проверяемого свойства. Также используйте prop вместо attr для проверяемого свойства.

ДЕМОНСТРАЦИЯ

 $(document).ready(function() {
   $(document).on('click','#1',function(){
        var Checked = $(this).prop('checked');  
        $("INPUT[type='checkbox']").each(function(){

            $(this).prop('checked', Checked);
        }); 
    });

});

Ответ №2:

ваш jquery для каждой функции, вы не должны изменять свойство toggle checkbox.

   $(document).ready(function() {
        $(document).on('click','#1',function(){ 
              $("INPUT[type='checkbox']").not(this).each(function(){             
                var Checked = $(this).prop('checked');          
                $(this).prop('checked', !Checked);
      });       
        });
    });

ДЕМОНСТРАЦИЯ

Ответ №3:

Вы также можете использовать

 $(document).ready(function() {
     $('#1').on('click',function(){
             var Checked = $(this).prop('checked');
             $.each($("input[type='checkbox']"), function(i,e){
             $(e).prop('checked', Checked);
             });
     });
});
Метки: