以前早就想写篇这样的文章,每次遇到这个问题总是想一阵子,然后按照解题的思路走一遍,走了很多重复的路。所幸今天有空,就写了下来。
代码大概如下,懒得兄弟可以直接到附件里面下载直接看效果
写道
<!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>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
});
function getAllCheckBox(){
$("input[name=testCheckBox]").each(function(){
alert($(this).val() );
});
}
function getSelectCheckBox(){
$("input[name=testCheckBox]").each(function(){
if(this.checked == true){
alert($(this).val() );
}
});
}
function getAllSelect(){
$("#testSelect option").each(function(){
alert("value:" + $(this).val() + ",text:" + $(this).text() );
});
}
function getSelectSelect(){
$("#testSelect option[selected=selected]").each(function(){
alert("value:" + $(this).val() + ",text:" + $(this).text() );
});
}
function getAllMSelect(){
$("#testMSelect option").each(function(){
alert("value:" + $(this).val() + ",text:" + $(this).text() );
});
}
function getSelectMSelect(){
$("#testMSelect option[selected=selected]").each(function(){
alert("value:" + $(this).val() + ",text:" + $(this).text() );
});
}
</script>
</head>
<body>
<p>---------------get checkBox value----------------</p>
<button onclick="getAllCheckBox()">Get All CheckBox Value</button>
<button onclick="getSelectCheckBox()">Get Select CheckBox Value</button>
<p>
<input type="checkbox" name="testCheckBox" value="checkBox1"/>
<input type="checkbox" name="testCheckBox" value="checkBox2"/>
<input type="checkbox" name="testCheckBox" value="checkBox3"/>
<input type="checkbox" name="testCheckBox" value="checkBox4"/>
</p>
<p>---------------get select value----------------</p>
<button onclick="getAllSelect()">Get All Select Value</button>
<button onclick="getSelectSelect()">Get Select Select Value</button>
<p>
<select id="testSelect" name="testSelect">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
</select>
</p>
<p>---------------get mutiple select value----------------</p>
<button onclick="getAllMSelect()">Get All Select Value</button>
<button onclick="getSelectMSelect()">Get Select Select Value</button>
<p>
<select id="testMSelect" name="testMSelect" multiple="multiple">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
</select>
</p>
</body>
</html>
效果图:
主要是来获得checkbox和select option的文本和值。现在还没用到过radio,不过我相信也是这个道理,下次再研究吧
http://blog.csdn.net/yhjhoo/archive/2009/11/06/4776895.aspx 链接是转到我以前转载别人的select选择符的一些内容,很有帮助
- 大小: 35.8 KB
分享到:
相关推荐
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。本文将详细讲解如何使用jQuery来操作checkbox,并实现全选、全不选、反选以及获取选中值这四个核心功能...
这些是jQuery对Radio、Checkbox和Select基本的操作方式。在实际应用中,你可能还需要结合DOM遍历、事件冒泡等知识,实现更复杂的交互功能。提供的Demo文件应该包含了这些操作的实例代码,通过查看和实践,可以加深...
本文将详细探讨如何使用jQuery对checkbox进行操作,这些操作包括选择、取消选择、检查状态以及实现更复杂的交互效果。 一、jQuery选择checkbox 在jQuery中,我们可以使用不同的选择器来选取checkbox元素。例如,`$...
本篇文章将深入探讨如何使用jQuery来操作checkbox元素,包括多选、全选和反选等常见功能。 一、jQuery选择checkbox 在jQuery中,我们可以使用`$('input[type="checkbox"]')`选择所有的checkbox。如果你想根据特定...
以上就是使用jQuery获取和操作checkbox选中值的基本方法。这些技巧在处理多选数据、用户交互和表单提交时非常有用。通过结合CSS类和DOM操作,可以进一步完善用户体验,如添加视觉反馈或动画效果。在实际项目中,确保...
昨天网上找了很多关于设置select checkbox radio只读的,都没办法满足要求,自己写了一个
在开始使用`Select2`之前,确保已经引入了`jQuery`库和`Select2`的CSS与JS文件。通常情况下,你可以在项目中添加以下链接: ```html <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/...
### Jquery 操作 Dom 标签 Select 在前端开发中,使用 ...以上就是使用 jQuery 对 `select`、`radio` 和 `checkbox` 元素进行操作的基本方法和技术要点。希望这些内容能帮助你在实际项目中更加高效地使用 jQuery。
在JavaScript的世界里,jQuery库提供了一种简洁的方式来操作DOM元素,包括处理radio、checkbox和select。这些元素在网页表单中十分常见,用于收集用户输入。以下是对标题和描述中涉及的知识点的详细说明: 1. **...
在网页开发中,表格(Table)是展示数据的常用组件,而jQuery库为开发者提供了丰富的API,使得操作表格中的元素,如复选框(Checkbox),变得更加便捷。本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件...
多选下拉框的基本结构通常包括一个隐藏的`<select>`元素和一组可见的`<label>`与`<input type="checkbox">`。每个`<label>`包裹一个`<input>`,并与其关联一个`<option>`,通过`for`属性链接`<input>`与`<option>`...
Radio和checkbox通常用于用户进行单选或多选操作,而select则用于下拉列表选择。在默认情况下,这些元素的样式受到浏览器的限制,往往显得单调且不一致。LazyForm允许开发者通过CSS和JavaScript来定制这些元素的外观...
在IT领域,特别是前端开发中,使用jQuery来操作DOM元素是一种常见的实践,特别是在处理复选框(checkbox)的全选与取消全选功能时。本文将深入解析如何使用jQuery实现这一功能,通过分析给定代码片段,提炼出关键...
在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它提供了简洁、强大的API来操作DOM元素,包括对select这样的下拉列表的操作。...在实际开发中,熟练掌握jQuery对于操作select和其他表单元素至关重要。
1. **jQuery选择器和DOM操作**:在创建这个下拉框时,jQuery的选择器会用于选取特定的DOM元素,例如`<div>`和`<input type="checkbox">`。同时,jQuery提供了丰富的DOM操作方法,如`.append()`用于添加元素,`....
jQuery 获取 Select 选择的 Text 和 Value 是一种常见的操作,例如在表单提交前获取用户选择的选项,或者在页面加载时根据服务器端的数据设置选择的选项。本文将详细介绍 jQuery 获取和设置 Select 选择的 Text 和 ...
selectclass:’ddl-select’,//选框样式 listboxclass:’ddl-listbox’,//展开的列表框样式 selected:[],//选中的对象value, data:{},//数据,格式:{value:name} onchange:function(text,value){ //回调函数 ...
在本文中,我们将深入探讨如何使用jQuery UI Multiselect插件来实现下拉多选checkbox的效果。这个插件是jQuery库的一个扩展,它为用户界面添加了一个功能丰富的多选下拉框,提供了美观且用户友好的多选选项。 首先...