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判断是否选中。