html中radio、checkbox選中狀態研究

時間 2020-05-05

標籤 html radio checkbox 選中狀態研究欄目 HTML 简体版

原文原文鏈接

html中radio、checkbox選中狀態研究

本文爲轉載文章，原出處請參考下方

版權聲明：本文爲轉載文章，出處： https://blog.csdn.net/qq_29542611/article/details/73385002
咱們在web頁面開發中常常須要讓單選框、複選框進行選中或者不選中的操做，咱們知道要讓單選框或者複選框默認選中就須要添加checked屬性，可是咱們在js中使用jquery的attr能夠在dom中添加checked屬性可是頁面卻沒有選中。因此今天進行一個完全的研究說明。html

來咱們看一個簡單的dom結構來進行說明。jquery

<!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方法來查看錶單提交的內容，這個是咱們最關心的吧。web

咱們認爲添加了checked屬性就可讓單選框或者複選框默認選中，那麼經過js那也應該是能夠的呀，可是事實可能與咱們想象中有些不同。dom

咱們能夠經過 $("[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屬性和頁面展現的是否選中並不能相互匹配了。spa

並且咱們還發現checked屬性並非直接影響表單的值，而是頁面展現的選中才是表單的值。.net

咱們的checkbox複選框通attr來控制選中也是一樣的問題。code

因此那麼問題來了，咱們並不能通attr來添加checked屬性或者移除checked屬性來控制單選框或者複選框是否被選中，一樣也不能經過checked屬性來判斷該單選框或者複選框是否被選中。咱們可使用jquery的prop方法來判斷當前單選框或者複選框是否被真正的選中。orm

好比咱們看語文屬性中有checked 可是實際頁面上並無別選中，咱們可使用 $(「name=‘subject’]:eq(0)」).prop(「checked」);來判斷到底有沒有被真正的選中。htm

那咱們想讓咱們須要的單選框複選框選中用什麼方法呢？一樣jquey的prop方法，單選框複選框都適用。blog

選中使用：$("[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點：

一、對radio 、checkbox 來講說，checked屬性能夠保證頁面初始化被選中，可是經過js或者jquery 控制checked屬性並不能保證相應的被選中，一樣也不能經過checked屬性來判斷該元素是否被選中。

二、checked屬性並不能影響form表單的值，表單頁面真正被選中的元素纔是form表單提交的值。

三、通jquery的prop方法能夠完美的選中或者取消選中元素，使用prop(「checked」,true) 選中，prop(「checked」,false)取消選中，通prop(「checked」) 返回的false或者true判斷是否選中。