首页 > 建站百科 > 公司新闻 > jquery获取checkbox 值为undefined

jquery获取checkbox 值为undefined

时间:2015-07-14 16:26:15 来源:西安网站建设
公司最近忙着开发网站内容管理系统,很多问题以前都没有仔细了解,当使用的时候才发现不少的小地方耽误了不少的时间,对此表示要好好学习啊。

做文章管理系统的时候,做一个很简单的文章排序,页面上实现全选/全不选这样一个简单的js,以前写代码的时候从来都是一次就搞定,不需要查看任何手册,但是这一次,莫名其妙的就是不能实现。每次使用jquery使用attr获取checkbox 值为都为undefined,着实郁闷了一下。代码是这样的


HTML:

<input type="checkbox" name="checkedAll" id="checkedAll" />

<input name="chk_list[]" type="checkbox" />
<input name="chk_list[]" type="checkbox" />
<input name="chk_list[]" type="checkbox" />
<input name="chk_list[]" type="checkbox" />
<input name="chk_list[]" type="checkbox" />

jQuery:

$("#checkedAll").click(function() {
     if ($(this).attr("checked") == true) {
         $("input[name='chk_list[]']").each(function() {
            $(this).attr("checked",true);
         });
      } else {
        $("input[name='chk_list[]']").each(function() {
            $(this).attr("checked",false);
         });
      }
});

使用alert弹出测试,每次使用jquery使用attr获取checkbox 值为都为undefined,然后查看jQuery API的文档,发现:

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop() method.The difference between attributes and properties can be important in specific situations. 
Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

也就说:v1.6以后attr(‘checked’)就返回checked和undefined,v1.6以前返回true和false,v1.6以后可以使用is(‘:checked’)或者.prop(‘checked’)来返回true和false

总结:
(1)获取checked的方法

    .attr('checked'):  
    .prop('checked'): //1.6+:true/false
    .is(':checked'):   

(2)checked赋值

     所有的jquery版本都可以这样赋值:
     .attr("checked","checked");
     .attr("checked",true);

      jquery1.6以上版本的:
     .prop("checked",true);

    .prop("checked","checked");
    .prop({checked:true});
     .prop("checked",function(){
              return true;
      });

(3)note:jquery1.6以上才存在prop();

最后修改jQuery代码为:
 

$("#checkedAll").click(function() {
    if ($(this).prop("checked") == true) {
        $("input[name='chk_list[]']").each(function() {
           $(this).prop({checked:true});
        });
     } else {
        $("input[name='chk_list[]']").each(function() {
            $(this).prop({checked:false});
       });
    }
});

这样才成功。 再次记录一下, 以免以后再犯类似 的低级错误。

阅读过此文章的读者,还阅读过下面的文章

2015-07-14 16:26:15      01056996010中文域名续费诈骗电话
2015-07-14 16:26:15      企尚网络签约西安老傅家医疗器械网站建设服务
2015-07-14 16:26:15      分析2015年中移动网站的发展趋势
2015-07-14 16:26:15      恭喜陕西省茶文化研究会官方网站建站成功
2015-07-14 16:26:15      企尚网络签约西安云溪电子科技有限公司官方网站建设
2015-07-14 16:26:15      陕西企尚网络加入西安安康商会
2015-07-14 16:26:15      陕西大师兄汽车服务有限公司与我公司签定网站建设合同
2015-07-14 16:26:15      我公司承接西安交大管院高培中心EDP已经完成
2015-07-14 16:26:15      西安专业网站建设公司找企尚网络
2015-07-14 16:26:15      企尚网络小程序测试版上线
2015-07-14 16:26:15      签约陕西新正企业管理有限公司网站建设及SEO业务
2015-07-14 16:26:15      企尚网络五一放假通知