Question

我有一个在升级到jQuery 1.6.2之前运行良好的功能，但现在根本不起作用。过去，函数使用 .attr（“checked”），但我尝试转而使用 .prop（“checked”）。我一直在拉我的头发试图找出为什么我不能得到.prop（“选中”）来返回一个值。

该函数用于隐藏实际的复选框，并根据复选框的状态向父 li 添加或删除类。之前有效的两件事，不再有效。

当页面加载时，如果HTML中的复选框设置为“已选中”，则jQuery不会将正确的类应用于父 li
单击某个项目时，它会将基础复选框设置为已选中，但再次单击时，ID未设置为未选中。

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）并非真正的错误，但是当您已经在HTML中添加该类时，没有必要说addClass（'checkboxes'）。

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();

jQuery复选框.prop（）问题

2 个答案: