<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head> <body>
<center>
<!--文本框-->
用户名:<input type="text" name="username" id="username" value="初始值" />
<br />
<br /> <!--下拉列表-->
部门:
<select name="unit" id="unit" style="width: 200px;">
<option value="0" selected>--请选择--</option>
<option value="1">部门1</option>
<option value="2">部门2</option>
</select><br /> <!--多选框-->
爱好:
<input type="checkbox" name="aihao" id="" value="0" checked="checked" />篮球
<input type="checkbox" name="aihao" id="" value="1" checked="checked" />足球
<input type="checkbox" name="aihao" id="" value="2" />羽毛球
<input type="checkbox" name="aihao" id="" value="3" />乒乓球
<br /> <!--单选框-->
性别:
<input type="radio" name="gender" id="" value="0" checked="checked" />男
<input type="radio" name="gender" id="" value="1" />女
<br />
<br />
<input type="button" id="" value="改变文本值" onclick="initText()" />
<input type="button" id="" value="改变下拉列表值" onclick="changeSelect()" />
<input type="button" id="" value="改变多选框值" onclick="changeCheckbox()" />
<input type="button" id="" value="改变单选框值" onclick="changeRadio()" />
<input type="button" id="" value="动态添加一个给下拉列表" onclick="addSelect()" />
<script type="text/javascript">
/*读取与改变文本框值*/
function initText() {
alert($("#username").val());
$("#username").val("这是改变后的值");
} /*读取与改变下拉列表值*/
function changeSelect() {
alert("选的值是" + $("#unit option:selected").val() + ",文本是:" + $("#unit option:selected").text());
$("#unit").val("2");
            //或者
            $("#level option[value='"+value+"']").attr("selected","true");
} function changeCheckbox() {
/*获取多选框的值*/
// $aihaos是一个数组
var $aihaos = $("[name='aihao'][checked]");
alert("多选框选中个数:" + $aihaos.length);
for(var i = 0; i < $aihaos.length; i++) {
var value = $($aihaos[i]).val();
alert(value);
}
/*设置为不选中状态*/
$($aihaos).attr("checked", false);
//设置其中一个为选中状态
$("[name='aihao'] :eq(2)").attr("checked", 'checked');
} function changeRadio() {
/*获取单选框的值*/
// $aihaos是一个数组
var $aihaos = $("[type='radio'][checked]");
alert("多选框选中个数:" + $aihaos.length);
for(var i = 0; i < $aihaos.length; i++) {
var value = $($aihaos[i]).val();
alert(value);
}
//设改变单选框的值
$("[type='radio'] :eq(1)").attr("checked", 'checked');
            $(":radio[value='线下']").prop("checked", true);
} //动态给下拉列表增加选项
function addSelect() {
var $unit = $("[name='unit']");
alert("多选框选中个数:" + $unit.length);
$unit.append("<option value='3'>部门3</option>");
$("<option value='4'>部门4</option>").appendTo($unit);
}
</script> </center>
</body> </html>

附加总结:

设置多选框联动(点一个,其他跟着变)

//	多选框联动
$("#empCheckAll").click(function(){
$("input[name='checkBox']").prop("checked",$(this).prop("checked"));
})

  

动态设置下拉列表的值:(有时候会不灵所以用下面这个)

$("[name='coursenature'] option[value='"+courseInfoBack.coursenature+"']").attr("selected","selected");

补充:建议还是用$("#selectId").val("222");的方式修改下拉列表的值。

例如:

<!DOCTYPE html>
<html> <body>
<select id="test">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select></body> </html>
<script>
$("#selectId").val("");</script>

更多具体的可以参考:http://www.cnblogs.com/qlqwjy/p/7511814.html

jQuery操作下拉列表以及单选多选框的更多相关文章

  1. [SAP ABAP开发技术总结]选择屏幕——按钮、单选复选框

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. 个人永久性免费-Excel催化剂功能第58波-批量生成单选复选框

    插件的最大威力莫过于可以把简单重复的事情批量完全,对日常数据采集或打印报表排版过程中,弄个单选.复选框和用户交互,美观的同时,也能保证到数据采集的准确性,一般来说用原生的方式插入单选.复选框,操作繁琐 ...

  3. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  4. jquery操作checkbox方法(全选、全不选、至少选择一个、选择值/文本)

    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...

  5. 关于我们的Jquery操作下拉列表和复选框,自定义下拉

    后半部分还有自定义下拉列表和开灯关灯的效果,可以进来来看一下 哦 如果网页有下拉列表和复选框,看一下Jquery怎么来操作他们,主要怎么来选取他们的数据,怎么设置某一项选中 先来看个下拉列表 < ...

  6. Jquery操作下拉列表和复选框,自定义下拉

    后半部分还有自定义下拉列表和开灯关灯的效果,可以进来来看一下 哦 如果网页有下拉列表和复选框,看一下Jquery怎么来操作他们,主要怎么来选取他们的数据,怎么设置某一项选中 先来看个下拉列表 < ...

  7. 11月8日下午Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  8. Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. 如何在select下拉列表中添加复选框?

    近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...

随机推荐

  1. Uva12230Crossing Rivers 数学

    Uva12230Crossing Rivers 问题: You live in a village but work in another village. You decided to follow ...

  2. C# 不同窗口传递参数

    form1: private void button1_Click(object sender, System.EventArgs e) { Form2 frm = new Form2(); frm. ...

  3. HTML5 canvas 圆盘抽奖

    使用html5 canvas 绘制的圆盘抽奖程序 效果图: 贴上全部代码:  1 <!DOCTYPE html> <html> <head> <meta ch ...

  4. copyEvens

    public int[] copyEvens(int[] nums, int count) { int newIndex=0; int i=0; int newArray[] = new int[co ...

  5. 每天一个Linux命令(7):pwd命令

    pwd命令以绝对路径的方式显示用户当前工作目录. 语法 pwd(选项) 选项 --help:显示帮助信息: --version:显示版本信息. 实例 [root@localhost ~]# pwd / ...

  6. redhat 安装python3

    一.首先,官网下载python3的所需版本. wget https://www.python.org/ftp/python/3.6.0/Python-3.6.0.tgz 想下载到那个文件夹下就先进入到 ...

  7. (原)Unreal渲染模块 源码和实例分析说明

    @author:白袍小道 说明 1.由于小道就三境武夫而已,而UE渲染部分不仅管理挺大,而且牵扯技术和内容驳杂,所以才有这篇梳理. 2.尽量会按书籍和资料,源码,小模块的调试和搬山(就是敲键盘)..等 ...

  8. 原始套接字--icmp相关

    icmp请求 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <uni ...

  9. django orm 之makemigrations和migrate命令

    makemigrations:将模型的更改生成迁移脚本文件.模型所在的app,必须放在settings.py中的INSTALLED_APPS列表中.这个命令有以下几个常用选项: 1.app_label ...

  10. UVa 11806 - Cheerleaders (组合计数+容斥原理)

    <训练指南>p.108 #include <cstdio> #include <cstring> #include <cstdlib> using na ...