checkbox选中问题之prop与attr

作者：web1762017.04.20来源：Web前端之家浏览：12177评论:0

关键词：JQuery JS

本文实例分析了jQuery checkbox选中问题之prop与attr注意点。分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>test</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
  // 全选
  $("#btnCheckAll").bind("click", function () {
    $("[name = chkItem]:checkbox").attr("checked", true);
  });
  // 全不选
  $("#btnCheckNone").bind("click", function () {
    $("[name = chkItem]:checkbox").attr("checked", false);
  });
  // 反选
  $("#btnCheckReverse").bind("click", function () {
    $("[name = chkItem]:checkbox").each(function () {
      $(this).attr("checked", !$(this).attr("checked"));
    });
  });
  // 全不选
  $("#btnSubmit").bind("click", function () {
    var result = new Array();
    $("[name = chkItem]:checkbox").each(function () {
      if ($(this).is(":checked")) {
        result.push($(this).attr("value"));
      }
    });
    alert(result.join(","));
  });
});
</script>
</head>
<body>
  <div>
    <input name="chkItem" type="checkbox" value="今日话题" />今日话题
    <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点
    <input name="chkItem" type="checkbox" value="财经" />财经
    <input name="chkItem" type="checkbox" value="汽车" />汽车
    <input name="chkItem" type="checkbox" value="科技" />科技
    <input name="chkItem" type="checkbox" value="房产" />房产
    <input name="chkItem" type="checkbox" value="旅游" />旅游
  </div>
  <div>
    <input id="btnCheckAll" type="button" value="全选" />
    <input id="btnCheckNone" type="button" value="全不选" />
    <input id="btnCheckReverse" type="button" value="反选" />
    <input id="btnSubmit" type="button" value="提交" />
  </div>
</body>
</html>

运行后，在火狐下面发现一个问题百思不得其解

问题描述：第一次点全选可以，然后点击全不选，接着再点击全选、全不选、反选就没了反应，后来用其他浏览器发下可以，所以感觉是兼容性的问题，后来查阅资料发现果然是的，参考地址http://jquery.com/

解决方法：将attr换为prop即可，经过验证各个浏览器都是好的，官网说明是在1.6之后建议用prop，在此记录以备后用

下为效果图