`

jquery 操作复选框 问题集锦

阅读更多

1.  jquery操作复选框是使用频繁的一个操作

2.  看看源码

 

<!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>
 <!--   引入jQuery -->
 <script src="js/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function(){
     //全选
     $("#CheckedAll").click(function(){
	     $('input[name=items]:checkbox').attr('checked', true);
	 });

	 //输出值
	$("#send").click(function(){
		var str="你选中的是:\r\n";
		$("input[name='items']:checkbox:checked").each(function(){
			str+=$(this).val()+"\r\n";
		})
		alert(str);
	});
  })
  </script>
</head>
<body>
<form method="post" action="">
   你爱好的运动是?
   <br/>
    <input type="checkbox" name="items" value="足球"/>足球
	<input type="checkbox" name="items" value="篮球"/>篮球
	<input type="checkbox" name="items" value="羽毛球"/>羽毛球
	<input type="checkbox" name="items" value="乒乓球"/>乒乓球
   <br/>
    <input type="button" id="CheckedAll" value="全 选"/>

	<input type="button" id="send" value="提 交"/> 
</form>
</body>
</html>

 

3. 对于复选框选中的测试

 

input[name='items'][checked=true]    ff3.6 ie7都可以运行
input[name='items']:checkbox[checked=true]    ff3.6 ie7都可以运行 
input[name='items'][checked]    ff3.6不可以 ie7可以运行
input[name='items']:checkbox[checked]    ff3.6 ie7 都可以运行
input[name='items'][checked=checked]    ff3.6 ie7 都不能运行
input[name='items']:checkbox[checked=checked]    ff3.6 ie7 都不能运行
input[name='items']:checked    ff3.6 ie7 都可以运行
input[name='items']:checkbox:checked    ff3.6 ie7 都可以运行
分享到:
评论

相关推荐

    jquery 复选框组件

    **jQuery 复选框组件详解** 在Web开发中,复选框(Checkbox)是一种常见的用户交互元素,用于让用户从多个选项中选择一个或多个。jQuery,作为一款强大的JavaScript库,提供了丰富的插件和方法来增强复选框的功能和...

    jquery实现 复选框 选中和不选中 美化复选框

    jQuery作为一个强大的JavaScript库,提供了解决这一问题的方法,可以通过自定义CSS和事件处理来实现复选框的美化和交互功能。本文将详细介绍如何使用jQuery实现复选框的选中与不选中效果的美化。 首先,我们需要...

    jQuery实现复选框checkbox全选、反选功能.rar

    本示例中,我们关注的是如何使用jQuery来实现复选框(checkbox)的全选和反选功能,这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中,复选框通常由`&lt;input&gt;`标签定义,类型为...

    jquery无限极复选框下拉树

    总结,"jquery无限极复选框下拉树"是一个基于jQuery和layui的交互式组件,它结合了复选框、下拉菜单和无限级树结构,提供了全选/单选功能,适用于需要展现和操作层次数据的场景。通过理解和运用这些知识点,开发者...

    jquery复选框全选操作

    在本示例中,我们将聚焦于jQuery实现复选框的全选与反选功能,这对于创建数据筛选或批量操作的用户界面非常有用。下面将详细介绍这个功能的实现方式。 首先,我们需要在HTML页面中设置一组复选框,通常我们会为这些...

    jQuery的复选框操作-实例页面

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件...总结,jQuery的复选框操作是前端开发中的常见任务,通过理解并熟练运用上述知识点,开发者可以创建功能丰富、用户体验优良的Web应用。

    jquery下拉多选复选框插件

    本主题涉及的是一个基于jQuery的下拉多选复选框插件,该插件能够提供用户友好的界面,方便用户在下拉菜单中进行多选操作,尤其适用于后台数据管理或前端交互场景。下面将详细介绍这个插件及其相关的知识点。 1. **...

    Jquery复选框美化

    "Jquery复选框美化"和"单选按钮美化"正是关注这个领域的技术实践。jQuery,一个强大的JavaScript库,为开发者提供了丰富的API和插件,使得这些基础的HTML元素能够变得更加吸引人和功能强大。 首先,复选框和单选...

    jquery动态复选框取值

    在本主题中,我们将深入探讨如何在jQuery中处理动态生成的复选框,并获取它们的值。复选框是HTML表单中常见的一种元素,用于让用户选择一个或多个选项。 一、jQuery基本概念 jQuery通过一个简洁的语法,让...

    jQuery树形复选框插件.zip

    《jQuery树形复选框插件的深度解析与应用》 在Web开发中,为了提供用户友好的交互体验,我们经常需要实现各种各样的UI组件。其中,树形结构的复选框是一种常见且实用的功能,它允许用户以层级方式选择或取消选择一...

    使用JQuery制作复选框的全选或单选特效

    本教程将深入探讨如何使用jQuery实现复选框的全选和单选特效,为用户界面添加交互性和动态性。 首先,我们需要理解HTML中的复选框(`&lt;input type="checkbox"&gt;`)的基本用法。复选框允许用户从多个选项中选择一个或...

    老裴帮助关于Jquery操作复选框的小练习

    这篇博文的链接虽然未提供具体内容,但我们可以通过对jQuery操作复选框的常见方法进行详细讲解来深入理解这一主题。 1. **复选框的基本HTML结构** 复选框在HTML中通常以`&lt;input&gt;`标签的形式出现,其type属性设置为...

    jQuery多级复选框checkbox选中代码

    总的来说,这个项目涵盖了jQuery的基本使用、DOM操作、事件处理以及CSS布局等多个方面,是学习和实践jQuery多级复选框控制的一个良好实例。通过深入理解并实践这些代码,开发者可以更好地掌握前端交互设计,并能灵活...

    jQuery如何判断checkbox(复选框)是否被选中

    在探讨如何使用jQuery判断复选框(checkbox)是否被选中的过程中,我们首先需要理解复选框的基本属性以及...通过上述示例和解释,我们不仅了解了如何判断和操作复选框,还学习了如何编写更高效、更现代的jQuery代码。

    jquery特效制作复选框,全选,反选,取消,购物车,统计价格,统计

    在这个项目中,我们关注的是使用jQuery来实现一些特定的功能,这些功能包括复选框的操作(全选、反选、取消选择)以及购物车中的商品价格统计。 首先,让我们深入了解一下复选框的操作。在HTML中,复选框是通过`...

    jquery 复选框 全选,全不选

    这个例子展示了如何利用jQuery的事件处理和DOM操作来实现复选框的全选全不选功能。在实际应用中,你可以根据需要对这个基础框架进行扩展,例如增加对分组复选框的支持,或者添加更复杂的逻辑判断。在HTML和jQuery的...

    jQuery高性能带复选框的树形结构插件

    `highchecktree`是一个专门针对这种情况设计的jQuery插件,它能高效地处理大量数据并提供带有复选框的功能,使得用户可以进行多级选择操作。 ### 插件特点 1. **高性能**: `highchecktree`特别优化了大数据量的...

    jQuery滑动复选框操作菜单.zip

    本项目“jQuery滑动复选框操作菜单”是针对前端开发的一个功能实现,主要用于创建动态且交互性强的菜单导航,特别是在移动设备上,滑动复选框能提供更好的用户体验。下面我们将深入探讨这个主题中的关键知识点。 ...

    jquery判断复选框是否被全部选中,达到全选的目的

    标题提到的“jquery判断复选框是否被全部选中,达到全选的目的”,就是针对这一需求的具体实现。下面我们将详细探讨如何利用jQuery来完成这个功能。 首先,我们需要理解jQuery库的基本用法。jQuery是一个广泛使用的...

    jquery操作单选框和复选框

    jquery操作单选框和复选框,超级实用的示例,节约项目开发时间!

Global site tag (gtag.js) - Google Analytics