2013-07-09 6 views
1

Я использую функцию jQuery .attr() для проверки и снятия флажков. Он работает в первый раз, но потом это уже не так.Как проверить и снять флажки с помощью jquery?

После прочтения нескольких вопросов об этом я просто не могу сделать эту работу. например this и this и this

Я тестировал его на Chrome и Firefox. Я получаю те же проблемы, используя jsFiddle.

Где проблема? В коде JavaScript, в HTML или где?

Это весь код:

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
<head> 
    <meta charset="utf-8"> 
    <title>Searchs</title> 
</head> 
<body> 
    <div id="results-body"> 
     <table> 
      <thead> 
       <tr> 
        <td class="small center"> 
         <input type="checkbox" id="checkall" onclick="master();" /> 
        </td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td class="center"> 
         <input type="checkbox" class="slave" onclick="slave();" /> 
        </td> 
       </tr><tr> 
        <td class="center"> 
         <input type="checkbox" class="slave" onclick="slave();" /> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

    <!-- LOAD THE JS AT THE END OF THE FILE --> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      master = function() { 
       if ($('#checkall:checkbox').is(":checked")) 
        $('input:checkbox').attr('checked',true); 
       else 
        $('input:checkbox').attr('checked',false); 
      } 
      slave = function() { 
       var allSelected = true; 
       $('.slave[type="checkbox"]').each(function() { 
        if ($(this).is(":not(:checked)")){ 
         allSelected = false; 
         //return; 
        } 
       }); 
       if (!allSelected) { 
        //$('#checkall:checkbox').removeAttr('checked'); 
        alert("REMOVE: \nFrom " + $('#checkall:checkbox').attr('checked')); 
        $('#checkall:checkbox').attr('checked',false); 
        alert("to " + $('#checkall:checkbox').attr('checked')); 

       } else { 
        alert("ADD: \nFrom " + $('#checkall:checkbox').attr('checked')); 
        $('#checkall:checkbox').attr('checked',true); 
        alert("to " + $('#checkall:checkbox').attr('checked')); 
       } 
      } 
     }); 
    </script> 
</body> 
</html> 
+2

выгрузить '' .attr' с .prop' – adeneo

+0

@adeneo Это работало. Пожалуйста, создайте новый ответ, чтобы я мог отметить его как принятый. – Lucio

ответ

4

Вы должны использовать .prop() при настройке свойств как checked, так меняется:

.attr('checked', true) 

в

.prop('checked', true) 

и такие вещи, как:

$('#checkall:checkbox').attr('checked') 

с:

$('#checkall:checkbox').is(':checked') 
3

Изменить все ваши .attr() к .prop().

jsFiddle example

Как docs говорят (начиная с 1.9):

Для того, чтобы получать и изменять свойства DOM, такие как проверено, выбран, или выключенное состояние элементов формы, используйте .prop().

+0

Так оно и работало для меня раньше, потому что я использовал версию «1.8», но теперь она не работает с версии «1.9». Очень интересно – Lucio

Смежные вопросы