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

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

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

效果图：

方法：

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

完整代码：

<!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>

使用val()方法设置表单中的默认选中项的更多相关文章

  1. angularjs ng-select ng-options 默认选中项.

    <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf- ...

  2. Android RadioGroup设置默认选中项

    今天有人问.Android 里面 RadioGroup里面有两个RadioButton怎么设置默认值? 第一个RadioButton设置 android:checked="true" ...

  3. php处理表单中的复选框问题以及js实现全选

    做的一个项目中遇到了全选和取消全选的问题,这是一个很普遍的功能,,虽然我们经常用到,但是真正做起来却发现行不通,在网上找了些,大部分都是ie,但是谷歌内核浏览器不能正常实现,所以经过小小的调整,今天就 ...

  4. Jquery 根据value值设置下拉列表（select）默认选中项

    方法一: $("#selIndustyType option[value='1']").attr("selected", "selected" ...

  5. jstree前端设置默认选中项

    $("#jstree").on("loaded.jstree", function (event, data) { var currDeptId = crm.g ...

  6. laravel中select2多选，初始化默认选中项

    项目中有发送消息功能,需要能通过搜索,多选用户,来指定发送人.使用 select2 插件来完成. select2 的 html 代码如下: <div class="form-group ...

  7. @Html.DropDownListFor默认选中项

    http://q.cnblogs.com/q/73902/ 项目使用mvc4,给dropDownList指定默认值未选中 页面代码是: 1.未有默认选中值 Html.DropDownListFor(m ...

  8. html <select> 用JS控制默认选中项

    <html> <head> <!--禁止页面缓存--><meta http-equiv="content-type" content=&q ...

  9. easyui combobox默认选中项

    今天写前端代码发现combobox还挺难搞, $("#select_Dic").combobox({                        url: "http: ...

随机推荐

  1. POJ 3393 Lucky and Good Months by Gregorian Calendar 模拟题

    题目:http://poj.org/problem?id=3393 不多说了,简单模拟题,因为粗心写错了两个字母,导致错了N遍,模拟还是一贯的恶心,代码实在不想优化了,写的难看了点.. #includ ...

  2. iOS开发之iOS程序偏好设置(Settings Bundle)的使用

    目录[-] 1.添加设置项 2.设置的控件 3.编辑设置项的文件 4.在程序中获取Settings 和写入Settings 添加UI 5.实现读取设置和保存代码 在Android手机上, 在某个程序里 ...

  3. Linux Screen命令使用

    参考URL: http://jingyan.baidu.com/article/295430f128d8ea0c7e005089.html ~~~~~~~~~~~~~~~~~~~~~~~~ 其它的不提 ...

  4. 【网络流24题】 No.14 孤岛营救问题 （分层图最短路）

    [题意] 1944 年,特种兵麦克接到国防部的命令,要求立即赶赴太平洋上的一个孤岛, 营救被敌军俘虏的大兵瑞恩. 瑞恩被关押在一个迷宫里, 迷宫地形复杂, 但幸好麦克得到了迷宫的地形图. 迷宫的外形是 ...

  5. Windows编程中的堆管理（过于底层，一般不用关心）

    摘要: 本文主要对Windows内存管理中的堆管理技术进行讨论,并简要介绍了堆的创建.内存块的分配与再分配.堆的撤销以及new和delete操作符的使用等内容. 关键词: 堆:堆管理 1 引言 在大多 ...

  6. [LeetCode] 315. Count of Smaller Numbers After Self (Hard)

    315. Count of Smaller Numbers After Self class Solution { public: vector<int> countSmaller(vec ...

  7. [译]GotW #1: Variable Initialization

    原文地址:http://herbsutter.com/2013/05/09/gotw-1-solution/ 第一个问题强调的是要明白自己在写什么的重要性.下面有几行简单的代码--它们大多数之间都有区 ...

  8. linux权限掩码

    我的博客:www.while0.com 主要是在新建文件或目录的时候,控制新文件或目录的默认权限. 文件:新建文件默认没有x权限,故新建文件在umask为000时最大权限是666. 目录:新建目录默认 ...

  9. win8.1右键没有“新建”选项

    # 记事本中新建以下代码,复制粘贴进去,# 将.txt格式改为.reg,双击运行它就行了. Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROO ...

  10. WordPress get_allowed_mime_types函数(wp-includes/functions.php)存在跨站脚本漏洞

    漏洞版本: WordPress 3.6 漏洞描述: CVE ID:CVE-2013-5738 WordPress是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设 ...