<!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" />
<title>属性选择的应用--全选反选</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.select_all').click(function(){
//var flag = document.getElementById('select_all').checked;
var flag = $(this).attr('checked');
if(flag){
$('input[name=hobby]').attr('checked','true');
}
else{
$('input[name=hobby]').removeAttr('checked');
}
})
$('.sub_btn').click(function(){
var hobby = [];
$('input[name=hobby]:checked').each(function(i){
hobby.push($(this).val());
})
$('.my_hobby').html("<font color=blue>您的爱好是： </font>"+hobby.toString());
})
})
</script>
</head>
<body>
<table width="300" >
<tr>
<td width="63">全选 <input type="checkbox" class="select_all" id="select_all" /></td>
<td width="221">兴趣爱好</td>
</tr>
<tr>
<td><input type="checkbox" name="hobby" value="看电影" /></td>
<td>看电影</td>
</tr>
<tr>
<td><input type="checkbox" name="hobby" value="超市购物" /></td>
<td>超市购物</td>
</tr>
</table>
<input type="button" value="提交" class="sub_btn" />
<div class="my_hobby" style="color:red;">
</div>
</body>
</html>
分享到：
相关推荐
本教程将深入探讨如何使用jQuery实现全选和反选功能，这在多选列表或表格中非常常见，例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框（通常标记为“全选”）...
很好用的使用jquery来实现的通用的全选反选功能
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改
在高级控件如DataGridView中，通过结合Checkbox可以实现全选和反选功能，为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...
页面上通过一个checkbox实现全选与反选
<title>jQuery全选/反选示例 <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> 全选" id="ckAll"/>水果 苹果" id="apple"/>苹果 香蕉" id="bann"/>香蕉 橘子" id="origin"/>...
demo46-jQuery全选，反选，取消选择.html
本文将详细讲解如何通过JS和jQuery实现checkbox的全选、反选以及全不选功能。 首先，我们需要理解HTML中的复选框元素`<input type="checkbox">`，它允许用户在一组选项中进行多选。为了实现全选、反选和全不选的...
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
复选框在用户界面设计中扮演着重要角色，它们允许用户在多个选项中进行多选操作。全选和反选功能则是复选框常用的一种交互模式...在实际开发中，我们需要根据具体的技术栈和业务需求，灵活地实现和优化全选和反选功能。
首先，我们来看一段用jQuery实现的全选和反选的基础代码示例。这段代码利用了jQuery的事件监听和属性操作功能来控制复选框的状态。当全选复选框被点击时，页面上所有具有相同name属性的复选框会被设置为选中或未选中...
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中，Checkbox（复选框）是一种非常常见的用户界面元素，用于收集用户的多选输入。尤其是在表单设计时，Checkbox的全选与反选功能极大地方便了...
### 一、jQuery全选 全选功能通常应用于多选列表或表格中，允许用户一次性选择所有选项。在jQuery中，我们可以通过`$("selector").attr("checked", true)`来实现。这里的`selector`是用于选择你想要设置为选中的...
接下来，我们将使用jQuery来实现全选和反选功能。 全选功能可以通过监听全选Checkbox的`change`事件来实现，然后遍历所有子Checkbox并设置其`checked`属性： ```javascript $(document).ready(function() { $('#...
使用jquery实现 checkbox的 全选，反选
《锋利的jquery》利用jquery实现复选框的全选和反选
综上所述，使用 jQuery 实现全选、全不选、反选以及获取选中值的功能是相当直观和简单的。通过绑定事件处理器，我们可以轻松地响应用户的交互，动态地更新页面状态。结合 HTML 结构和适当的 CSS 样式，可以创建出...
jquery实现全选反选功能，代码可以直接使用，可应用于实际项目当中。