jQuery checkbox選中問題之prop與attr注意點分析

2019-11-19 18:58:19

字體：大中小

來源：轉載

供稿：網友

本文實例分析了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，在此記錄以備后用

下為效果圖