<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function(){
$("#button1").click(function(){
$("#form1 input:not(.test):enabled").val("hello");
});
$("#button2").click(function(){
$("#form1 input:not(.test):disabled").val("world");
});
$(":checkbox").click(function(){
$("div:first").html("<b>"+$("input:checked").length+"</b>");
});
$("select").change(function(){
var str="";
$("select option:selected").each(function(){
str=$(this).text()+" ";
});
$("div:last").html("<b>"+str+"</b>");
});
})
</script>
</head>
<body>
<h3> 表单对象属性过滤选择器.</h3>
<form id="form1" action="#">
<input type="button" value="test1" id="button1" class='test'>
<input type="button" value="test2" id="button2" class='test'>
<br /><br />
可用元素:<input name="add" value="可用文本框"/> <br/>
不可用元素:<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素: <input name="che" value="可用文本框" /><br/>
不可用元素:<input name="name" disabled="disabled" value="不可用文本框"/><br/>
<br/>
多选框:<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<div></div>
<br/><br/>
下拉列表1:<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>上海</option>
<option selected="selected">香港</option>
<option>北京</option>
<option selected="selected">河北</option>
<option>广东</option>
<option>重庆</option>
</select>
<br/><br/>
下拉列表2:<br/>
<select name="test2" >
<option>海南</option>
<option>上海</option>
<option selected="selected">北京</option>
<option>云南</option>
<option>广州</option>
<option>贵州</option>
</select>
<br/><br/>
<div></div>
<div></div>
</form>
</body>
</html>
分享到:
相关推荐
在给定的压缩包"jQuery弹出框checkbox复选框多选代码.zip"中,我们可以看到两个核心文件:`index.html`和`jquery-1.9.1.min.js`。这些文件共同构成了一个简单的jQuery应用,用于实现弹出框内的多选复选框功能。 ...
圆心和圆钩可能是指当单选或复选按钮未被选中时,显示一个空心的圆圈,当选中时,圆圈内填充一个实心或带钩的图形。而方心和方钩则可能是用方形作为背景,未选中时显示空心框,选中时填充实心或显示钩状图标。这些...
在JavaScript编程中,下拉多选框和复选框是常见的用户交互元素,它们用于收集用户的多选项选择信息。在本项目中,我们探讨的是如何使用纯JavaScript实现一个功能丰富的下拉多选框,而不是依赖于像jQuery这样的库,...
总之,这个jQuery带搜索功能的多选下拉框代码是一个实用的前端组件,结合了多选、搜索和赋值功能,提高了用户在大量选项中的选择效率。开发者需要掌握jQuery、DOM操作、事件处理以及可能的搜索算法等相关技术来实现...
复选框是用户界面中的一个重要元素,允许用户在多个选项中进行多选。与单选按钮不同,复选框可以让用户同时选择多个选项。在树形菜单中,复选框与节点关联,用户可以通过勾选复选框来选择或取消选择对应的节点及其子...
单选按钮和复选框是用户界面中最常见的交互元素,用于收集用户的单选或多选信息。在传统HTML中,它们的样式有限且缺乏动态效果。然而,通过结合HTML5和SVG,我们可以创造出各种独特的动画效果,如改变颜色、形状转换...
在网页开发中,"下拉树形复选框"是一种常见的交互元素,它结合了下拉菜单和树形结构的特点,通常用于展示层级关系的数据,并允许用户进行多选操作。这种组件广泛应用于权限管理、组织架构选择、地区选择等场景。在本...
此外,可以利用JavaScript或jQuery为复选框添加交互功能,如多选验证或联动其他元素。 4. **下拉框**(Dropdown):下拉框允许用户从预设的选项列表中选择。在美化下拉框时,可以考虑调整下拉箭头的样式,设置下拉...
这个例子可能包括了不同风格的单选和多选选择框,如圆角矩形、圆形、复选标记、图标等。每个样式都是通过CSS3的特性实现的,没有依赖JavaScript或者任何框架,如JQUERY。 了解这些基本原理后,你可以根据项目需求...
3. **多选与单选**:在网页中,多选和单选通常是通过复选框(checkboxes)和单选按钮(radio buttons)来实现的。这些元素可以用来让用户在一组选项中进行一个或多个选择。案例中的代码可能会演示如何监听这些元素的...
复选框拥有一个`name`属性,用于在提交表单时将一组复选框中的选中项作为一个数组发送到服务器。此外,每个复选框还拥有一个`value`属性,它表示当复选框被选中时,该值会被发送到服务器。本文中的复选框示例使用了...
2. **获取第一个和最后一个元素**:通过按钮`#firstBtn`和`#lastBtn`,我们可以获取表格中的第一个和最后一个`<tr>`元素的内容。使用`$("table tr:first").html()`获取第一个元素的HTML内容,而`$("table tr:last")....
在本项目中,"jQuery基于layui制作产品分类多条件筛选代码"是一个实现高效产品分类和搜索功能的前端解决方案。...对于学习和理解前后端交互、jQuery用法以及layui框架的应用,这是一个很好的实践案例。
- **按钮(Button)**:包括普通按钮、链接按钮、复选按钮等,支持事件绑定。 - **树形控件(Tree)**:展示层次结构数据,支持节点的展开、折叠、选择等操作。 3. **ligerUI的API使用** - **初始化组件**:通过...
初始化后,`<select>`元素将被转换为一个多选下拉框,用户可以通过复选框选择多个选项。默认样式可以通过修改`multiple-select.css`进行自定义,以适应网站的UI设计。 `multiple-select.js`还提供了一些实用的API...
jQuery提供了一系列方便的方法,如`$.trim()`用于去除字符串两端的空白字符,`val()`获取或设置表单元素的值,以及`$(selector).is(':checked')`检查复选框或单选按钮是否被选中。此外,还可以通过`keyup`, `blur`等...
4. 实现多选功能,可能通过复选框(checkbox)或者添加移除按钮来实现。每次选择或取消选择一个选项时,更新输入框的显示内容以及存储选定值的数据结构。 5. 当用户完成选择后,可以将选中的值提交给服务器,或者用于...
在这个系统中,可能会使用到Label(显示文本)、RadioButtonList(单选按钮列表)和CheckBoxList(复选框列表)等控件,以实现用户选择答案的界面。 数据库方面,项目包含了"VoteDataBase.sql"文件,这通常是一个...
同时,`attr('checked')`或`.prop('checked')`用于获取或设置复选框的选中状态。 接下来,为了实现通讯录的显示,开发者通常会用到HTML5的数据属性(data-*)来存储通讯录数据,并使用jQuery的`.data()`方法来读取...
在JavaScript和jQuery开发中,全选/反选功能是一个常见的需求,特别是在表格或者多选列表中。当用户点击一个主复选框(如“全选”按钮)时,所有子复选框应相应地被选中或取消选中。然而,在实际应用中,可能会遇到...