我们在web页面开发中经常需要让单选框、复选框进行选中或者不选中的操作，

我们可以在元素中添加checked属性 或者添加checked="checked" 都可以让某个选项默认选中，单选框的如果有多个checked 会以最后一个为准。

我们知道要让单选框或者复选框默认选中就需要添加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>

来看一下我们刚开始初始化的时候。这里说明一下我们使用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判断是否选中。

html中radio、checkbox选中状态研究的更多相关文章

  1. html中radio、checkbox选中状态研究（静下心来看，静下心来总结）

    html中radio.checkbox选中状态研究(静下心来看,静下心来总结) 一.总结 1.单选框的如果有多个checked 会以最后一个为准 2.js动态添加checked属性:不行:通过 $(& ...

  2. JQuery获取指定元素中的checkbox选中状态的一些属性

    项目中用户上传病例数据,每一次上传自动生成一个病例文件夹,数据保存到后台,前端显示文件夹,现在的需求是勾选想要删除的文件夹的chenckbox,点击删除后,数据库和前端都相应的更新. 如果是静态页面, ...

  3. 获取不到Repeater控件中的CheckBox选中状态

    写在前面的话:在做一个项目的时候,需要使用到Repeater控件,并且在Repeater控件内放置了CheckBox控件来标志需要删除的行,选中后,在后台取到的CheckBox的值总是为false.最 ...

  4. # li鼠标移入移出，点击，变背景色，变checkbox选中状态

    移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...

  5. 如何设置Installshield中 feature的选中状态

    原文:如何设置Installshield中 feature的选中状态 上一篇: 使用strtuts2的iterator标签循环输出二维数组之前一直有筒子问如何设置Installshield中 feat ...

  6. 前端开发学习之——使用jquery/javascript判断及改变checkbox选中状态

    一.使用jquery判断及改变checkbox选中状态 1.使用JQuery判断一个checkbox 是否为选中: (1).attr('checked) 看JQuery版本1.6+返回:”checke ...

  7. WPF ListBoxItem模板中添加CheckBox选中问题

    原文:WPF ListBoxItem模板中添加CheckBox选中问题 是这样的,需要一个ListBox来展示照片,并添加一个选中的CheckBox.这就需要对ListBox的ItemTemplate ...

  8. jquery--获取input checkbox是否被选中以及渲染checkbox选中状态

    jquery获取checkbox是否被选中 html <div><input type="checkbox" id="is_delete" n ...

  9. Datagridview 中的checkbox 选中或勾选状态失效

    1.问题描述,先选中第一行,再取消选择,然后点击部门全选,第一行没有打钩,状态是不选中的状态. 2.分析代码 先选中第一行,单元格的单击事件中 改变选中状态为1,第一行取消选择,单元格的单击事件中 改 ...

随机推荐

  1. c#如何仅在datatgirdview控件的头部（列名处）添加右键菜单

    近期在弄ArcgisAE实习,其中有一个功能是需要操作图层的属性字段的,为了方便操作图层的属性,最好是在图层的属性表中,也就是在显示图层属性的DataGirdView控件的头部添加一个右键菜单来实现相 ...

  2. BZOJ2227 [Zjoi2011]看电影(movie)

    Description \(k\)个座位,\(n\)个人依次过来,每人随机从\(k\)个座位中选择一个,并从它开始不停向后走直到遇到空座位坐下.求所有人都能坐下的概率(即没有人走到第\(k+1\)个位 ...

  3. 无效的列类型:getTimestamp not implemented for class oracle.jdbc.driver.T4CNumberAccessor

    错误信息: 无效的列类型:getTimestamp not implemented for class oracle.jdbc.driver.T4CNumberAccessor 错误原因:经过排查发现 ...

  4. Android解析ActivityManagerService（一）AMS启动流程和AMS家族

    前言 此前在Android系统启动流程.应用进程以及深入四大组件这三个系列文章中,都提及到了AMS,但都没有系统的来讲解它,本文就以AMS为主来进行讲解,其中会有一些知识点与这些系列文章有所重合,这里 ...

  5. 分页函数 pager.py

    #!/usr/bin/python env # coding:utf-8 class Pagination(object): # 数据总条数 当前页 每页显示条数 最多显示页面 def __init_ ...

  6. 如何在前端项目中引用bootstrap less？

    在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的cs ...

  7. Oracle EBS PO采购订单更新

    DECLARE l_result NUMBER; l_progress NUMBER; l_errors PO_API_ERRORS_REC_TYPE; l_chg PO_CHANGES_REC_TY ...

  8. Hive的介绍及安装

    简介 Hive 是基于 Hadoop 的一个数据仓库工具,可以将结构化的数据文件 映射为一张数据库表,并提供类 SQL 查询功能. 本质是将 SQL 转换为 MapReduce 程序. Hive组件 ...

  9. RESET MASTER和RESET SLAVE使用场景和说明

    [前言]在配置主从的时候经常会用到这两个语句,刚开始的时候还不清楚这两个语句的使用特性和使用场景. 经过测试整理了以下文档,希望能对大家有所帮助: [一]RESET MASTER参数 功能说明:删除所 ...

  10. 一、Linux中的常用命令2 二、Vim编辑器的使用

    一.Linux的常用命令###<1>文件目录操作 13. echo:用于输出字符串,shell编程,echo 1. 输出字符串 : echo str ,shell编程会使用(类似java中 ...