关于表单的val()方法的一点细节

最新推荐文章于 2022-07-06 17:31:28 发布

原创最新推荐文章于 2022-07-06 17:31:28 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

17 篇文章

订阅专栏

学习心得

16 篇文章

订阅专栏

本文探讨了jQuery中val()方法与attr()方法在处理多选表单时的微妙区别。通过代码实验，发现val()会清除未选中的多选框，而attr()则保留已选中的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        <input type="checkbox" value="check1" />多选1
		<input type="checkbox" value="check2" />多选2
		<input type="checkbox" value="check3" />多选3
		<input type="checkbox" value="check4" checked="checked" />多选4

注意上面check4（多选4）有一个checked的属性；下面就这个checked展开实验。

$(":checkbox").val(["check2","check3"]);//使用这个之后，check4的checked的属性会无效，被选中的checkbox只有是check2和check3；

而另外一种方法：

$(":checkbox:eq(0)").attr("checked",true);//使用这个之后check4的checked不会失效，被选中的checkbox是check1和check4；

这就是这两种方法的细微区别；

同样，下面再来一段代码实验一下：

        <select multiple="multiple" id="multiple" style="height: 200px;">
			<option selected="selected">选择1号</option>
			<option>选择2号</option>
			<option>选择3号</option>
			<option>选择4号</option>
			<option selected="selected">选择5号</option>
        </select>

注意（选择2号）和（选择5号）的属性selected；

下面使用val（）方法来选择表单：

$("#multiple").val(["选择2号","选择3号","选择4号"]);//1号和5号的selected失效；

换成以改变属性值的方法来选择表单：

$("#multiple option:gt(0):not(:last)").attr("selected","selected");//选择1号之后（不包括1号）的option改变selected属性；1号和5号的selected属性selected并不失效；

总结一下：使用jQuery的val()方法和attr()方法都可以做到选择多选框，但是val方法会清除掉未选择的value的多选框的被选中状态，而attr不会清除掉之前已经被选中的多选框的选中状态。