jQuery如何判斷和設定單選多選是否選中？？

標籤：style   使用   java   strong   問題   sp   代碼   html   on   

  如何判斷HTML中的單選多選是否選中呢？

 這是web編程中最常用的判斷，可是前段時間，卻遇到了一個很奇怪的問題。

我想很多人會這樣判斷

 if($("#weixuanzhong").attr("checked")=="checked")//選中時 {  }

但如果是如下的HTML代碼：

<input type="checkbox" checked="checked" value="male" id="xuanzhong"  />

卻發現上邊的判斷始終都是真，不管多選框是不是選中。於是我奇怪，以前自己都是這麼判斷的啊，好像沒發現問題啊。

於是發現了這個屬性其實在不同情況下是不同的。

1 HTML中沒有checked="checked"這個屬性時

例如：

HTML代碼

<input type="checkbox"  value="male" id="xuanzhong"  />

判斷是否選中可以這麼做：

  if($("#xuanzhong").prop("checked"))//選中時，為真 {    alert($("#xuanzhong").prop("checked")); }

2HTML中有checked="checked"這個屬性時，不可以通過 if($("#weixuanzhong").attr("checked")=="checked")來判斷是否選中，

HTML代碼

<input type="checkbox"  checked="checked" value="male" id="xuanzhong"  />

判斷是否選中可以這麼做：

 if($("#xuanzhong").attr("checked")=="checked")//不管是否選中，都是真，無法判斷 {     alert($("#xuanzhong").attr("checked")); }  if($("#xuanzhong").prop("checked"))//選中時，為真 {    alert($("#xuanzhong").prop("checked")); }

3如何選中多選？

   一般情況下我們都使用 checked="checked"來設定選中項，好像也沒問題，但如果是如下的HTML代碼，

多選預設選中<input type="checkbox"  checked="checked" value="male" id="xuanzhong"  />

使用如下的代碼，並不能保證多選是選中狀態，即使設定了，也會出現多選框沒有選中的情況

 $("#xuanzhong").attr("checked", "checked");

相反如果沒有checked="checked"這個屬性，也就是說HTML代碼如下：

<input type="checkbox"   value="male" id="xuanzhong"  />

可以使用如下指令碼設定選中狀態

 $("#xuanzhong").attr("checked", "checked");

以此看來，設定多選框的選中狀態，如果使用 $("#xuanzhong").attr("checked", "checked");這種方式，必須保證原始的HTML中沒有checked="checked"，否則就會出錯，達不到想要的效果。

但使用$("#xuanzhong").prop("checked",true)不管什麼情況都是可以選中的。

 經過測試才發現，之所以自己之前能通過$("#xuanzhong").attr("checked")=="checked"判斷多選框是否選中，恰恰是應為HTML中沒有checked="checked"，每次都是自己通過$("#xuanzhong").attr("checked", "checked");這種方式設定選中狀態的，因此沒有出錯。

因此判斷多選框是否選中應該使用$("#xuanzhong").prop("checked")，而不是$("#xuanzhong").attr("checked")=="checked"，設定選中應該使用$("#xuanzhong").prop("checked",true)，而不是$("#xuanzhong").attr("checked", "checked");，否則稍微不注意就會出錯。

經過測試發現單選和多選是一樣的，也和HTML中有沒有checked="checked"這個有關

jQuery如何判斷和設定單選多選是否選中？？