怎么用val()方法设置表单中的默认选中项

最新推荐文章于 2021-06-04 00:16:22 发布

转载最新推荐文章于 2021-06-04 00:16:22 发布 · 784 阅读

文章标签：

#jquery

本文介绍如何使用jQuery的val()方法为select、checkbox和radio元素设置默认选中项，适用于需要预填充用户表单的选择项场景。

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

有时候我们展示给用户的表单中的checkbox，radio，selec等标签的一些项是默认选中的。比如：当用户修改文章的时候，如果对应的栏目为下拉框的话，那么它的默认选中值应该是原来的栏目位置。

可以使用jquery中的val()方法给select、checkbox、radio设置默认选中项。

对于multiple类型的select和checkbox还可以设置多个默认值。

效果图：

方法：

[html]view plaincopy 
   
 $("select#multiple").val(["选择2号","选择4号"]);  

完整代码：

[html]view plaincopy 
   
 <!doctype html>  
 <html>  
 <head>  
 <meta charset="utf-8">  
 <title>jquery test</title>  
 <script src="jquery-1.11.1.min.js"></script>  
 <style type="text/css">  
     div  
     {  
         margin-top:50px;  
         margin-left:100px;   
     }  
 </style>  
 </head>  
   
 <body>  
 <div>  
 <select id="single">  
     <option value="选择1号">选择1号</option>  
     <option value="选择2号">选择2号</option>  
     <option value="选择3号">选择3号</option>  
     <option value="选择4号">选择4号</option>    
 </select>  
 </div>  
 <div>  
 <select id="multiple" multiple="multiple" style="height:120px;">  
     <option value="选择1号">选择1号</option>  
     <option value="选择2号">选择2号</option>  
     <option value="选择3号">选择3号</option>  
     <option value="选择4号">选择4号</option>    
 </select>  
 </div>  
 <div>  
 <input type="checkbox" value="check1"/>多选1  
 <input type="checkbox" value="check2"/>多选2  
 <input type="checkbox" value="check3"/>多选3  
 <input type="checkbox" value="check4"/>多选4  
 </div>  
 <div>  
 <input type="radio" value="radio1">单选1  
 <input type="radio" value="radio2">单选2  
 <input type="radio" value="radio3">单选3  
 <input type="radio" value="radio4">单选4  
 </div>  
 </body>  
 <script type="text/javascript">  
     $("select#single").val(["选择4号"]);  
     $("select#multiple").val(["选择2号","选择4号"]);  
     $(":checkbox").val(["check1","check3"]);  
     $(":radio").val(["radio4"]);  
 </script>  
 </html>  