JQuery下拉框与复选框
1.
先看下一个例子:
首先是一个下拉框
<table width="50%">
<tr>
<td >选择资源类型:</td>
<td id="changeContent">HTML页面</td>
<td>
<select id="s1">
<option value="1">HTML页面</option>
<option value="2">下载资源</option>
<option value="3">超链接资源</option>
<option value="4">自测题</option>
<option value="5">课件资源</option>
<option value="6">问卷调查</option>
<option value="7">FAQ</option>
<option value="8">文本及附件</option>
</select>
</td>
</tr>
</table>
之后,通过
$(document).ready(function(){
$("#s1").change(function(){
$("#changeContent").html( $("option[value="+$(this).val()+"]").html() );
alert($("option[value="+$(this).val()+"]").html());
//alert($(this).val());
});
});
以下代码进行下拉框值的获取。
上文中的 $(this).val() 对应下拉框中的 value
而 $("option[value="+$(this).val()+"]").html() 则是对应value后的内容。
2.
$("select[id=select]").change(function(){
var newvar = $("select[id=select] option:selected").text();
$("input[id=input1]").val(newvar);
});
$("#showdiv").click(function(){
alert( "Email:"+ $("#user_name").val()+"@"+$("#input1").val() );
})
这段代码表示id为selected的下拉框改变后,会自动取得所选中的值内容,并提示出来。
3.
可以通过append方法,动态的增加下拉框中的选项.
eg:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var i=1;
$("#editlink").click(function(){
$("#selectlink").append( "<option value=/"1/">cssrain"+i+"</option>" );
i++;
});
});
</script>
<input type="button" id="editlink" value="add options" />
<div id="editlinkdiv">
<select id="selectlink" name="selectlink">
<option>add options</option>
</select>
</div>
其中,append方法直接把需要添加的内容添加至下拉框的option选项中。
4.复选框的全选择与反选择等。。。
<mce:script type="text/javascript" src="JS/jquery.js" mce_src="JS/jquery.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("#test").click(function(){ $("input[type*='checkbox']").each(function(i){ if(this.checked) { alert(this.value); } }); }); //-------------------------------------- $(".notcheck").click(function(){ $("input[type=checkbox]").not("[checked]").each(function(i){ alert(this.value); }); }); //-------------------------------------- $("#form1").submit(function(){ if($("#form1 input:checked")) { alert($("#form1 input:checked").val()); } //强制不提交 return false; }); //-------------------------------------- $(".btn").click(function(){ $("#divPosType input:checked").each(function(i){ alert($(this).val()); }); }); //-------------------------------------- //复选框全部选择 $("#selectall").click(function(){ $("input[type=checkbox]").each(function(i){ $(this).attr("checked",true); }); }); $("#checkall").click(function(){ if(this.checked) { $("input[type=checkbox]").each(function(i){ $(this).attr("checked",true); }); } else { $("input[type=checkbox]").each(function(i){ //alert($(this).val()); $(this).attr("checked",false); }); } }); }); // --></mce:script> <body> <input type="button" value="test" id="test"> <input type="checkbox" id="a" checked="checked" value="1"/>1 <input type="checkbox" id="b" checked="checked" value="2"/>2 <input type="checkbox" id="c" value="3" οnclick="alert(this.value)"/>3 <input type="button" value="测试没有选中的" class="notcheck"> <hr> <form id="form1"> <input type="radio" name="items" id="item1" value="a"/>A <br/> <input type="radio" name="items" id="item2" value="b"/>B <br/> <input type="submit" id="btn1"> </form> <hr> <input type="button" value="测试选中的" class="btn"> <div class="inpblk" id="divPosType"> <ul> <li><input type="checkbox" name="chkJobType" id="chkJobType1" value="1" checked/>全职</li> <li><input type="checkbox" name="chkJobType" id="chkJobType2" value="2" />兼职</li> <li><input type="checkbox" name="chkJobType" id="chkJobType3" value="3" checked />临时</li> <li><input type="checkbox" name="chkJobType" id="chkJobType4" value="4" checked />实习</li> </ul> </div> <input type="button" id="selectall" name="selectall" value="全部选择" /> <input type="checkbox" id="checkall" value="1"/>全选 </body>
JQuery下拉框与复选框相关推荐
- vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTM ...
- 你知道如何修改单选框、复选框、下拉框的默认样式吗
介绍 HTML 原生的单选框.复选框元素样式在各个浏览器上面由用户代理默认设置样式,如果在页面上应用了其他颜色或主题时,我们通常也相应的更改这些输入框或按钮的颜色或背景,否则会出现颜色与背景或主题不融 ...
- form表单注意点合集(文本域、单选框、复选框、下拉框等)
.html <form action="#" target="_blank">账号:<input type="text" ...
- jQuery分别获取选中的复选框值
jQuery分别获取选中的复选框值 原文:jQuery分别获取选中的复选框值 function jqchk(){ //jquery获取复选框值 var s=''; $('input[na ...
- jquery获取所有选中的复选框
jquery获取所有选中的复选框 提示:在列表中总有一些需求会在表头用到复选框进行批量操作,在此我介绍一下怎么获取到已选中的复选框值 示例:如下所示,获取到数组之后1,通过ajax传给后台进行处理就好 ...
- 单选按钮带文字_一分钟教会你用Word添加单选框和复选框
又到学习Word技巧的时候啦!学了这么长时间,你的技能点有没有增加呢?对表格的使用有没有更加熟练了?是否很好奇别人家的表格是怎么弄成可以单选框和复选框的效果呢~~~~下面让小编带你解锁新姿势~ 效果图 ...
- 单选框与复选框数据回填
单选框与复选框数据回填 ·························································· 开发工具:Visual Studio 2015 关键技术: ...
- HTML下拉列表(select),单选框(radio), 复选框(checkbox)如何向后端传值
前言 提示:该文章记录前端往后端传值的一些细节 提示:以下是本篇文章正文内容,下面案例可供参考 一.form是什么? form是前端往后端传值的一个表单 二.html代码如下 1,下拉列表源码 < ...
- html手机单选框,手机移动网页制作:表单输入框、单选框、复选框
手机移动网页制作:表单输入框.单选框.复选框 本文继前面讲到的WML语言中的文本标签和图像.链接后,接着讲WML语言中的表单内容. 在Html中,表单内容包括输入框.单选框.复选框等等,WML也并不例 ...
- html中的下拉列表框,单选框和复选框
下拉列表框: 下拉列表框是指允许网页浏览者从下拉式菜单中选择某一项,我们通常会在网页中看到各种下拉列表框,这是一种最节省空间的方式.正常情况下,浏览者只能看见一个选项,单击选项按钮打开菜单后才能看到全 ...
最新文章
- Flask | 浅读文档,快速出发
- 如何检查Go中是否存在文件?
- [MySQL] MySQL的自己主动化安装部署
- leetcode 605. Can Place Flowers | 605. 种花问题
- linux python连接oracle数据库_Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法...
- Mac Apache WebDav 服务器配置
- 王道操作系统考研笔记——2.3.4 信号量机制
- php字符串反转abcdefg_php中实现字符串翻转的方法
- 图解TCP/IP读书笔记(三)
- 优秀的用户体验设计,从讲好一个故事开始
- 开发板连接了有线路由器,然后咋的就能通到外网了(udhcp)
- 设置Cookie的生命周期
- 没有进出口权,怎样接收外汇?
- 最清晰易懂的Elasticsearch操作手册|收藏夹必备
- 移动端跨平台开发的深度解析
- 【渝粤教育】电大中专Office办公软件 (2)_1作业 题库
- android ndk x86 arm,NDK r21编译FFmpeg 4.2.2(x86、x86_64、armv7、armv8)
- squid+icap测试配置
- 软件项目、产品版本号的命名规则、定义、命名规范(git代码分支版本、项目产品文档版本)
- ubuntu以及其常用软件下载地址