JQuery флажок .prop () проблема

Question

У меня есть функция, которая прекрасно работала до обновления до jQuery 1.6.2, но теперь не будет работать вообще. В прошлом эта функция использовала .attr («проверено») , но я пытался вместо этого переключиться на .prop («проверено») . Я дергал себя за волосы, пытаясь понять, почему я не могу получить .prop («проверил»), чтобы вернуть значение.

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

• Когда страница загружается, если в HTML-коде установлен флажок «флажок», jQuery не применяет соответствующий класс к родительскому элементу li
• При щелчке элемента он устанавливает базовый флажок как установленный, но при повторном нажатии идентификатор не устанавливается, как не отмечается.

HTML

<ul class="checkboxes">
    <li><input type="checkbox" name="boro[]" value="Bronx">Bronx</li>
    <li><input type="checkbox" name="boro[]" value="Brooklyn" checked>Brooklyn</li>
    <li><input type="checkbox" name="boro[]" value="Queens">Queens</li>
</ul>

JQuery:

$('ul.checkboxes').checkBoxes();

$.fn.checkBoxes=function() {
    $ul=$(this);
    $ul.addClass("checkboxes").find("input:checkbox").hide();
    $ul.find("li").addClass($(this).find("input:checkbox").prop("checked")?"checked":"unchecked").click(function(e) {
     $(this).toggleClass("checked unchecked").find("input:checkbox").att("checked",!$(this).prop("checked"));
    )}
)};

Спасибо за понимание!

Answer 1

У вас есть несколько ошибок:

1) Вам нужно определить свою функцию checkBoxes перед ее вызовом.

2) На самом деле не ошибка, но нет смысла говорить addClass('флажки'), когда вы уже добавили этот класс в HTML.

3) $(this).find("input:checkbox").prop("checked") Это будет определять только то, установлен первый флажок или нет.Я почти уверен, что вы хотите, чтобы $ (this) ссылался на текущий флажок, но он не в нужной области.

4) Вы написали att вместо attr

5) У вас есть дополнительный ) в конце вашей функции.

Вот код, который, я считаю, делает то, что вы хотите:

$.fn.checkBoxes = function() {
   $(this)
      .addClass("checkboxes")
      .find("input:checkbox")
      .hide()
      .end() -- revert back to $(this)
      .find("li")
      .each(function(){
         $(this).addClass(
            $(this)
              .find("input:checkbox")
              .prop("checked") ? "checked" : "unchecked"
         );
      })
      .click(function(e) {
         var $cb = $(this)
            .toggleClass("checked unchecked")
            .find("input:checkbox");
         $cb.attr("checked", !$cb.prop("checked"));
      });
};

$('ul.checkboxes').checkBoxes();

http://jsfiddle.net/cpvQ4/

Answer 2

Если ваша проблема заключается только в синтаксических ошибках в размещенном вами коде, попробуйте следующее (синтаксические ошибки исправлены):

$.fn.checkBoxes=function() {
    $ul=$(this);
    $ul.addClass("checkboxes")
       .find("input:checkbox")
       .hide();
    $ul.find("li")
       .addClass($(this).find("input:checkbox").prop("checked")?"checked":"unchecked")
       .click(function(e) {
            $(this)
                .toggleClass("checked unchecked")
                .find("input:checkbox")
                .attr("checked",!$(this).prop("checked"));
       });
};

$('ul.checkboxes').checkBoxes();