select checkbox radio设置选中与一些细节

html表单分为三种:select/option下拉框、checkbox多选框、radio单选框。

jquery中对表单的选中设置可以通过val()和attr()来进行。

**

select

**

QQ图片20160614155804.png

如上的代码,我们先来看看取值。

上图中对第一行option设置了selected,用val()取值,得到的是"1",如果把value="1"去掉,结果就是"选择1号"

这说明这两个都可以被val()当做值取出,只是value="1"优先。

那么怎样设置选中呢?
使用val()
如果没有value="1",使用$('#single').val("选择1号")进行设置,
有value="1",则使用$('#single').val('1')进行设置。

使用attr()
$('#single').attr('selected',true);

为什么会这样呢?
我们在写代码的时候,select/option的下拉中往往显示的是描述性文件,比如"1-张三" "2-李四" 这样,真正传给后台的,是这个option的id(通常写在value=""中),如果在下拉中直接显示1 2,这样看起来不直观。

好的做法是,在value=''中写入id,在标签对之间写此id的描述性文字,也就是:

<option value="1">选择1号</option>

使用val('1');设置选中,表单传到后台的是id ,在下拉中也能显示出必要的描述。

**

checkbox

**

checkbox用于多选,提交的时候获得到的是一个数组。设置单个选中传字符串,设置多个选中传数组。
设置选中的方法同上面的select,可用val()也可用attr(),区别在于使用attr()时设置属性名为 attr("checked",true)''
用val()设置多个选中时,需要传入数组格式 val(['1','2','3']);
由于input checkbox实际上是多个独立的input,所以在获取后,需要遍历出结果。

**

radio

**

用于单选,一组radio需要设置相同的name,提交的时候获得到的是一个数组,设置选中必须要传数组。
使用attr()时设置属性名为 attr("checked",true)''

参考资料:http://www.cnblogs.com/joboxs/p/3557436.html

标签: select选中, option选中, checkbox选中, radio选中

添加新评论