<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>
<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>
相关推荐
本文将详细讲解如何使用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，...