- 浏览: 215758 次
- 性别:
- 来自: 绍兴
文章分类
最新评论
-
112703013:
你好, 想问个问题 就是我这边上传一个zip文件 大概有100 ...
rails文件上传下载和删除 . -
chen_miao:
qplovechinese 写道 很好!
3q
simple jQuery date-picker plugin 使用 -
qplovechinese:
很好!
simple jQuery date-picker plugin 使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head runat = "server" >
< title ></ title >
< script src = "Scripts/jquery-1.7.min.js" type = "text/javascript" ></ script >
< script type = "text/javascript" >
$(function () {
// 全选
$("#btnCheckAll").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", true);
});
// 全不选
$("#btnCheckNone").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", false);
});
// 反选
$("#btnCheckReverse").bind("click", function () {
$("[name = chkItem]:checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
});
// 全不选
$("#btnSubmit").bind("click", function () {
var result = new Array();
$("[name = chkItem]:checkbox").each(function () {
if ($(this).is(":checked")) {
result.push($(this).attr("value"));
}
});
alert(result.join(","));
});
});
</ script >
</ head >
< body >
< div >
< input name = "chkItem" type = "checkbox" value = "今日话题" />今日话题
< input name = "chkItem" type = "checkbox" value = "视觉焦点" />视觉焦点
< input name = "chkItem" type = "checkbox" value = "财经" />财经
< input name = "chkItem" type = "checkbox" value = "汽车" />汽车
< input name = "chkItem" type = "checkbox" value = "科技" />科技
< input name = "chkItem" type = "checkbox" value = "房产" />房产
< input name = "chkItem" type = "checkbox" value = "旅游" />旅游
</ div >
< div >
< input id = "btnCheckAll" type = "button" value = "全选" />
< input id = "btnCheckNone" type = "button" value = "全不选" />
< input id = "btnCheckReverse" type = "button" value = "反选" />
< input id = "btnSubmit" type = "button" value = "提交" />
</ div >
</ body >
</ html >
|
2、checkbox table选中
效果图:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head runat = "server" >
< title ></ title >
< style type = "text/css" >
table
{
border-collapse: collapse;
}
td
{
border: 1px solid #ccc;
}
</ style >
< script src = "Scripts/jquery-1.7.min.js" type = "text/javascript" ></ script >
< script type = "text/javascript" >
$(function () {
// chkAll全选事件
$("#chkAll").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", this.checked);
});
// chkItem事件
$("[name = chkItem]:checkbox").bind("click", function () {
var $chk = $("[name = chkItem]:checkbox");
$("#chkAll").attr("checked", $chk.length == $chk.filter(":checked").length);
})
});
</ script >
</ head >
< body >
< table id = "tb" >
< thead >
< tr >
< td >
< input id = "chkAll" type = "checkbox" />
</ td >
< td >
分类名称
</ td >
</ tr >
</ thead >
< tbody >
< tr >
< td >
< input name = "chkItem" type = "checkbox" value = "今日话题" />
</ td >
< td >
今日话题
</ td >
</ tr >
< tr >
< td >
< input name = "chkItem" type = "checkbox" value = "视觉焦点" />
</ td >
< td >
视觉焦点
</ td >
</ tr >
< tr >
< td >
< input name = "chkItem" type = "checkbox" value = "财经" />
</ td >
< td >
财经
</ td >
</ tr >
< tr >
< td >
< input name = "chkItem" type = "checkbox" value = "汽车" />
</ td >
< td >
汽车
</ td >
</ tr >
< tr >
< td >
< input name = "chkItem" type = "checkbox" value = "科技" />
</ td >
< td >
科技
</ td >
</ tr >
< tr >
< td >
< input name = "chkItem" type = "checkbox" value = "房产" />
</ td >
< td >
房产
</ td >
</ tr >
< tr >
< td >
< input name = "chkItem" type = "checkbox" value = "旅游" />
</ td >
< td >
旅游
</ td >
</ tr >
</ tbody >
</ table >
</ body >
</ html >
|
发表评论
-
淘宝开源编辑器KISSY Editor
2013-01-04 16:46 2381KISSY Editor 是开源项目 KISSY ... -
jquery获得select option的值 和对select option的操作
2012-09-25 21:19 1262jQuery获取Select元素,并选择的Te ... -
js 彷excel 键盘上下左右移动
2012-09-03 19:11 3044思路假设初始坐标为(0,0)首先要算出表格的最大最小坐标 即( ... -
jquery 图表插件highcharts & highstock
2012-08-23 14:43 11203Highcharts是纯JavaScript编写的图表库,提 ... -
jquery jConfirm
2012-06-09 08:57 3112这个Jquery插件的目的是替代JavaScript的标准函数 ... -
jQuery Confirm 确认提示框插件
2012-06-08 19:50 9275jQuery Confirm是一个用于显示confirm确认提 ... -
jQuery获取元素位置以及高度与宽度
2012-04-28 14:05 3964form:http://apps.hi.baidu.com/s ... -
jquery 预加载图片
2012-04-24 14:39 1549from:http://dreamerslab.com/blo ... -
jquery 表格排序插件
2012-04-12 19:52 1635jquery 表格内容排序插件,插件来源:http://www ... -
jquery如何获得页面元素的坐标值
2012-04-10 21:15 1184jquery如何获得页面元素的坐标值 jquery如何获 ... -
ruby(rails)+jquery.ajax 登录和注册
2012-03-31 18:02 3437写一个简单ajax登录和注册方法,缩简写法 以注册为例!!! ... -
jquery 鼠标经过显示大图
2012-03-27 21:17 3049以下推存一下代码 <!DOCTYPE html PUB ... -
ruby js 导出表格为excel,word
2012-02-25 11:53 1436因为项目需要,所以在 ... -
jquery 条形码插件
2012-01-13 14:34 3916因为工作需求,项目简单化,所以rails3中使用jquery ... -
simple jQuery date-picker plugin 使用
2011-10-30 19:57 4384simple jQuery date-picker plugi ...
相关推荐
本文将详细讲解如何使用jQuery来操作checkbox,并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中,我们可以使用不同的选择器来选取页面上的checkbox元素。...
以下是一些常见的jQuery操作: 1. **选择元素**:jQuery提供了多种选择器,如`$("[type=checkbox]")`和`$("[type=radio]")`,可以用来选取页面上所有的checkbox或radio元素。如果你想选择具有特定ID或类名的元素,...
jQuery 对checkbox的操作
接着,可以通过jQuery选择器来选中需要改变样式的复选框,并调用插件提供的方法来应用样式。例如,如果所有的复选框都有一个统一的class名`custom-checkbox`,可以这样写: ```javascript $(document).ready...
本文将详细探讨如何使用jQuery对checkbox进行操作,这些操作包括选择、取消选择、检查状态以及实现更复杂的交互效果。 一、jQuery选择checkbox 在jQuery中,我们可以使用不同的选择器来选取checkbox元素。例如,`$...
**绚丽的复选框 jQuery-Checkbox** 在网页设计中,复选框(checkbox)是常见的交互元素,用于让用户选择一个或多个选项。然而,原始的HTML复选框样式通常较为简单,缺乏吸引力。为了提升用户体验和界面美观度,...
一、jQuery操作checkbox 1. 检查状态: jQuery提供了`is()`方法来检查checkbox是否被选中。例如,如果有checkbox的ID为"myCheckbox",可以这样检查它的状态: ```javascript if($("#myCheckbox").is(":checked")) {...
在本教程中,我们将深入探讨如何使用jQuery来操作checkbox元素,特别是动态生成、设置显示数量以及获取选中项等核心知识点。 首先,让我们了解checkbox的基本概念。Checkbox是HTML中的一个表单元素,用于让用户对一...
以上就是使用jQuery获取和操作checkbox选中值的基本方法。这些技巧在处理多选数据、用户交互和表单提交时非常有用。通过结合CSS类和DOM操作,可以进一步完善用户体验,如添加视觉反馈或动画效果。在实际项目中,确保...
本篇文章将深入探讨如何使用jQuery来操作checkbox元素,包括多选、全选和反选等常见功能。 一、jQuery选择checkbox 在jQuery中,我们可以使用`$('input[type="checkbox"]')`选择所有的checkbox。如果你想根据特定...
本文将详细介绍如何使用jQuery库来操作网页中的复选框checkbox,实现checkbox列表(list)和复选框表格(table)的选中功能。文中将通过实例代码...通过本文的介绍,希望能够帮助到对jQuery操作复选框感兴趣的开发者们。
在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理以及Ajax交互。本文将深入探讨如何在jQuery环境下实现输入框(input)复选框(checkbox)的联动效果,即当某个复选框被选中时,...
3. **jQuery操作**: 接下来,我们需要使用jQuery来处理按钮点击事件,并实现Checkbox的移动功能。以下是一个简单的示例: ```javascript $(document).ready(function() { $('#leftArrow').click(function() { ...
### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中,Checkbox(复选框)是一种非常常见的用户界面元素,用于收集用户的多选输入。尤其是在表单设计时,Checkbox的全选与反选功能极大地方便了...
综上所述,"jQuery radio checkbox美化"涉及到前端开发中的多方面技能,包括jQuery的选择器和事件处理、CSS样式设计、插件应用、自定义图标、响应式设计以及无障碍性考虑。通过学习和实践这些技巧,可以创建出既美观...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互等任务。本文将深入探讨如何使用jQuery来实现复选框(checkbox)的选中和取消选中功能,以及如何处理多选的情况。 ...
二、jQuery操作Checkbox复选框 Checkbox则允许用户多选,我们同样可以使用`.prop()`或`.attr()`来检查或取消选中,使用`.is()`检查是否已被选中。 1. **设置Checkbox选中状态**: ```javascript $('input[type=...
综上所述,jQuery提供了丰富的API来操作checkbox,包括获取和设置选中状态、处理点击和改变事件,以及处理分组的checkbox。这些功能让开发者能更高效地创建动态、交互性强的Web应用。在实际项目中,结合HTML和CSS,...