html中radio、checkbox選中狀態研究
本文為轉載文章，原出處請參考下方
版權聲明：本文為轉載文章，出處： https://blog.csdn.net/qq_29542611/article/details/73385002
我們在web頁面開發中經常需要讓單選框、復選框進行選中或者不選中的操作，我們知道要讓單選框或者復選框默認選中就需要添加checked屬性，但是我們在js中使用jquery的attr可以在dom中添加checked屬性但是頁面卻沒有選中。所以 今天進行一個徹底的研究說明。
來我們看一個簡單的dom結構來進行說明。
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<form name="from1" id="form1" action="test.do">
<label>性別：</label>
<input type="radio" name="sex" value='male'/><label>男</label>
<input name="sex" checked type="radio" value="female"/><label>女</label>
<input name="sex" checked type="radio" value="gay"/><label>同性戀</label>
<br>
<label>科目：</label>
<input name='subject' type="checkbox" value="Chinese" /><label>語文</label>
<input name='subject' type="checkbox" checked value="Math" /><label>數學</label>
<input name='subject' type="checkbox" checked="checked" value="English"/><label>英語</label>
<input name='subject' type="checkbox" value="Sport"/><label>體育</label>
<input type="submit" /> <input type="reset" />
</form>
</body>
</html>
我們可以在元素中添加checked屬性 或者添加checked=“checked” 都可以讓某個選項默認選中，單選框的如果有多個checked 會以最后一個為准。
來看一下我們剛開始初始化的時候。這里說明一下我們使用jquery的serialize方法來查看表單提交的內容，這個是我們最關心的吧。
我們認為添加了checked屬性就可以讓單選框或者復選框默認選中，那么通過js那也應該是可以的呀，但是事實可能與我們想象中有些不一樣。
我們可以通過 $("[name='sex']:eq(1)").attr("checked",false);或$("[name='sex']:eq(1)").removeAttr("checked");將checked屬性移除.
可以通過 $("[name='sex']:eq(1)").attr("checked",true);或$("[name='sex']:eq(1)").attr("checked","");
或$("name='sex']:eq(1)").attr("checked","checked");將checked屬性添加上去
在單選框radio中，我們多次調用attr給某個radio添加checked屬性和移調，此時的checked屬性和頁面展示的是否選中 並不能相互匹配了。
而且我們還發現checked屬性 並不是直接影響 表單的值，而是頁面展示的選中才是 表單的值。
我們的checkbox復選框 通attr來控制選中也是同樣的問題。
所以那么問題來了，我們並不能通attr來添加checked屬性或者移除checked屬性來控制單選框或者復選框是否被選中，同樣也不能通過checked屬性來判斷該單選框或者復選框是否被選中。我們可以使用jquery的prop方法來判斷當前單選框或者復選框是否被真正的選中。
比如我們看 語文 屬性中有checked 但是實際頁面上並沒有別選中，我們可以使用 $(“name=‘subject’]:eq(0)”).prop(“checked”);來判斷到底有沒有被真正的選中。
那我們想讓我們需要的單選框復選框選中用什么方法呢？同樣jquey的prop方法，單選框復選框都適用。
選中使用：$("[name='sex']:eq(1)").prop("checked",true);$("[name='subject']:eq(0)").prop("checked",true);
取消選中使用：$("[name='sex']:eq(1)").prop("checked",false);$("[name='subject']:eq(0)").prop("checked",false);
最后我們總結以下3點：
1、對radio 、checkbox 來說說，checked屬性可以保證頁面初始化被選中，但是通過js或者jquery 控制checked屬性並不能保證相應的被選中，同樣也不能通過checked屬性來判斷該元素是否被選中。
2、checked屬性並不能影響form表單的值，表單頁面真正被選中的元素才是form表單提交的值。
3、通jquery的prop方法可以完美的選中或者取消選中元素，使用prop(“checked”,true) 選中，prop(“checked”,false)取消選中，通prop(“checked”) 返回的false或者true判斷是否選中。