首页 文章

jQuery复选框.prop()问题

提问于
浏览
0

我有一个功能在升级到jQuery 1.6.2之前完美运行,但现在根本不起作用 . 在过去,函数使用 .attr("checked") ,但我尝试切换到 .prop("checked") . 我一直在拉我的头发试图找出为什么我不能得到.prop("checked")来返回一个值 .

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

  • 页面加载时,如果HTML中的复选框设置为"checked",则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"));
    )}
)};

感谢您的任何见解!

2 回答

  • 0

    你有一些错误:

    1)您需要在调用之前定义函数 checkBoxes .

    2)并非真正的错误,但是当您已经在HTML中添加该类时,没有必要说addClass('checkboxes') .

    3) $(this).find("input:checkbox").prop("checked") 这将仅确定是否选中了第一个复选框 . 我'm almost positive you want $(this) to refer to the current checkbox, but it'不在合适的范围内 .

    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/

  • 1

    如果您的问题只是发布代码中的语法错误,请尝试此操作(语法错误已更正):

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

相关问题