`
chengyu2099
  • 浏览: 468953 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jQuery each 复选 全选 遍历 等DEMO

jQueryOracleSpringJSPCSS 
阅读更多
[color=blue] 

var ckTimeArray = eTime.split(':');
		$(ckTimeArray).each(function(){
		    var ckt = this;
			$('#'+ckt).attr('checked',true);
		});
数组取属性值的时候需要加 ‘#’ 取 对象

$('input[type="checkbox"]').each(function(){
	$(this).attr('checkbox',true); // 不需要加 # ,封装过啦
});


<%@ page language="java"  pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
%>
<html>
  <head>
    <title>My JSP 'jQueryCry.jsp' starting page</title>
    <script type="text/javascript"src="<%=path %>/YXTWebPage/album/js/jquery.js"></script>
    <script type="text/javascript"src="<%=path %>/YXTWebPage/album/js/jquery-1.3.2.js"></script>
  
<script type="text/javascript">
	$(function()
	{
		//alert($("#cry").val());
		$("#cry").val('****update****');
			
		var aRadioList = $('input[type="radio"]',document.forms[0]);
		//alert(aRadioList.size()+' - 个radio');
	
//	遍历第一个表单下所有类型为radio元素的值
		aRadioList.each(
		function()
		{
			//alert($(this).val());
		});
//	遍历第一个表单下所有类型为 input:checkbox 元素的值			
		var aCheckBoxArray = $('input:checkbox',document.forms[0]);
		aCheckBoxArray.each(
		function()
		{
			//alert($(this).val());
		});
			
//		获取下拉菜单的值
		$('#choose').change(
		function ()
		{
			alert($('#choose').val());
		});
//		复选框 全选、取消全选	
		$('#checkedAll').click(
		function()
		{
		/*	$('#checkbox1').attr('checked','true'); //打钩
			$('#checkbox2').attr('checked','');     //不 打钩
			$('#checkbox3').attr('checked','true'); //打钩
		*/
		//alert($('#checkbox3').attr('checked')); checkbox3 为 FALSE 
		if($(this).attr('checked') == true) //全选
		{
//			这里可以勾选一部分 复选框 如:$('input[name !=  ^=  $=  匹配多个值 $("input[id][name$='man']")   含有ID name 已 man 开头	
			$('input[name="ckn"]').each(
			function() 
			{
   				$(this).attr("checked",true);
  			});
		}else
		{
			$('input[name="ckn"]').each(
			function() 
			{
   				$(this).attr("checked",'');
  			});
		}
		});
//		checkBox
		$('input[name="ckn"]').each(//$('input:checkBox').each(
		function()
		{
			$(this).click(
			function()
			{
				alert($(this).val());
			});
		});
//		radio
		$('input[type="radio"]').each( //$('input:radio').each(
		function()
		{
			$(this).click(
			function()
			{
				alert($(this).val());
			});
		});
//		Button		
		$('#btn1').click(
		function()
		{
			$('#btn2').attr('disabled','disabled');
		});

//	一次性事件		
	$('#btn2').one('click',
		function()
		{
			$('<input type="text" name="radi" id="t" />').appendTo("#ce").click(
			function()
			{
				alert('指定ID DIV 层 内新增 HTML');
				$('#btn3').css( "background", "red" );
				$('#t').hide();
				$('#hiddenId').show();
			});
			alert('$(\'#id\').one (\'click\',function )');
		});
// bind
	$('#btn3').bind('click',
		function()
		{
			if($('#btn2').attr('disabled')==true)
			{
				$('#btn2').attr('disabled','');
			}else
			{
				$('#btn2').attr('disabled','disabled');
			}
		});	
//img each
	$('#imgBtn').click(
		function()
		{
			$('img').each(
			function(i)
			{
				alert('i = '+i);
				this.src ='test'+i+'.jpg';
			});
			
			alert('imgLength = '+$('img').length); // size()
			alert('$(\'img\').get(0) = '+$('img').get(0));
			alert('而实际上是元素数组 get() ');
			alert('该 img 数组的长度:'+$('img').get().length);
		});
/* li  index 
	$('li').each(
		function()
		{
			$(this).click(
			function()
			{
				var iIndex = $('li').index($(this));
				alert('index 用法 ：'+iIndex);
			});
		})
 */
// date
	$('#data').data('xKey','将数据保存在元素的一个key里面');
	var sData = $('#data').data('xKey');
	//alert('data:'+sData);
	$('#data').removeData('xKey');
	//alert('remove:'+$('#data').data('xKey'));
	
// 在给定的祖先元素下匹配所有的后代元素
	var aInputArray = $('form > input');
	//alert(aInputArray.size());
	aInputArray.each(
		function()
		{
			var sInputValue = $(this).val();
			//alert(sInputValue);
		});
//table first
	var sTableFirst = $('tr:first');
	var sTableLast = $('tr:last');
	var eqTr = $('tr:eq(1)'); //第二行
	var gtTr = $('tr:gt(0)'); // 大于
	var ltTr = $('tr:lt(1)'); //匹配所有小于给定索引值的元素
// contains
	var aContainsDiv = $('div:contains("John")');
	//alert(aContainsDiv.length);
	aContainsDiv.each(
		function()
		{
			//alert($(this).text());
		});
//map 将一个数组中的元素转换到另一个数组中  $.map()
	var mapValue = $('input').map
					(
						function()
						{
							return $(this).val();
						}
					).get().join(',');
	//alert(mapValue);
	var xMap = $.map( [0,1,2],
						function(n)
						{
							return n + 4;
						}
					);
	//alert(xMap);
//append 向每个匹配的元素内部追加内容。
	$('p').append('Hello,jQuery');
	$('btn3').append('append');
//appendTo 把所有匹配的元素追加到另一个指定的元素元素集合中
	$('p').appendTo('div');
// prepend , prependTo 类似 同上 
//replaceWith
	//$('p').replaceWith('<b> replaceWith.</b>');
	//$('<b> replaceWith.</b>').replaceAll("p");
//empty 
	//$('p').empty();
	$('p').remove();
// clone 复制 
	$('p').clone().appendTo('div');
// bind
	$('#idSub').bind('click',
		function(event)
		{
			return true;
			//event.preventDefault();
			//alert('submit');
		});
//live		
		$("li").live("click", 
				function()
				{
	   			 $(this).addClass("active"); //live事件可以被阻止冒泡
				}
			).eq(0).bind("click", function()
				{
    				$(this).addClass("active"); //普通的click事件是无法阻止冒泡的
				});
		
		$("li b").live("click", function(){
		    $(this).addClass("active");
		    return false;  //阻止冒泡及阻止浏览器默认行为
		});
		
});
</script></head><body><form action="jQueryCry.jsp" name="frm" method="post">
<!-- bind -->
<input type="button" id="idSub" value="sub" />
<!-- live  -->
<ul>
    <li><b>Google</b></li>
    <li><b>Yahoo</b></li>
</ul>
<!-- empty , remove  -->

<p>Hello2, <span>Person</span> <a href="#">and person</a></p><hr>

<!-- replaceWith --><hr>

<p>Hello</p><p>cruel</p><p>World</p>
<!-- appendTo --><br><hr>

<div>1</div><div>2</div>
<!-- append --><br><hr>

<p>I would like to say: </p>
<!-- map --><hr>

<!-- contains --><br><hr>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn
<!-- table jquery --><br><hr>
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
<!-- li index --><br><hr>
<input type="text" id="data" value="data" />
<!-- input -->    
   		<input type="text" id="cry" value="jQuery world" />
<!-- select --><br><hr>
   		<select id="choose">
   			<option value="请选择">toChoose</option>
   			<option value="1">1</option>
   			<option value="2">2</option>
   			<option value="3">3</option>
   		</select>
<!-- checkBox --><br><hr>
		<input type="checkbox" name="checkedAll" id="checkedAll" />全选/取消全选<br>
   		猫：<input type="checkbox" id="checkbox1" name="ckn" value="猫" />
   		狗：<input type="checkbox" id="checkbox2" name="ckn" value="狗" />
   		猪：<input type="checkbox" id="checkbox3" name="ckn" value="猪" />
<!-- radio --><br><hr>
		oracle：<input type="radio"  id="radio1" name="r" value="oracle" checked="checked" />
   		java：	<input type="radio"  id="radio2" name="r" value="java" />
   		spring：<input type="radio"  id="radio3" name="r" value="spring" />
<!-- button --><br><hr>
   		<input type="button" id="btn1" value="Btn1" />
   		<input type="button" id="btn2" value="灰机灰过去喽" />
   		<input type="button" id="btn3" value="死神" />
   		<div id="hiddenId" style="display:none">style="display:none"</div>
<!-- appendTo --><br><hr>
   		<div id="ce">
   		</div>
<!-- each img --><br><hr>
	<img /><img /> <input type="button" id="imgBtn" value="imgBtn" />
<!-- li index
<ul>
    <li><a href="#nogo">index 0 中超联赛世界排名不敌新加坡</a></li>
    <li><a href="#nogo">index 1 中超联赛世界排名不敌新加坡</a></li>
    <li><a href="#nogo">index 2 中超联赛世界排名不敌新加坡</a></li>
    <li><a href="#nogo">index 3 中超联赛世界排名不敌新加坡</a></li>
    <li><a href="#nogo">index 4 中超联赛世界排名不敌新加坡</a></li>
    <li><a href="#nogo">index 5 中超联赛世界排名不敌新加坡</a></li>
    <li><a href="#nogo">index 6 中超联赛世界排名不敌新加坡</a></li>
</ul>
 --><br><hr>
    </form>
  </body>
</html>

[/color]
分享到：
| input4
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 复选框 全选，全不选

    本话题主要关注如何使用jQuery来实现复选框的全选和全不选功能。在HTML页面中，复选框是一种常见的表单元素，用于让用户可以选择多个选项中的一个或多个。全选和全不选功能则为用户提供了一种便捷的方式来一次性选择...

    jquery复选框全选操作

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

    spreadjs_列头添加复选框全选功能-demo.zip

    在列头复选框全选功能的实现中，我们需要监听复选框的点击事件，然后遍历所有单元格并根据全选框的状态更改它们的选择状态。这可以通过调用SpreadJS的API来完成，例如 `sheet.setActiveRange()` 或 `sheet....

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

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

    jquery实现复选框全选和反选

    《锋利的jquery》利用jquery实现复选框的全选和反选

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

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

    juqery实现复选框全选/反选demo源码

    在标题"jQuery实现复选框全选/反选demo源码"中，我们关注的核心知识点是利用jQuery实现复选框的全选和反选功能。这个功能在许多网页应用中都非常实用，比如在表格数据筛选、表单多选等场景。通过简单的jQuery代码，...

    一个基于jQuery 实现的的全选、反选复选框插件源码例子

    总结起来，这个基于jQuery的全选、反选复选框插件源码例子涉及到了jQuery的选择器、属性操作、事件处理、可能还有动画和插件封装等技术。对于想要提升jQuery技能或者了解复选框交互的开发者来说，这是一个很有价值的...

    JQuery实现checkbox的全选取消全选

    在IT领域，特别是前端开发中，使用jQuery来操作DOM元素是一种常见的实践，特别是在处理复选框（checkbox）的全选与取消全选功能时。本文将深入解析如何使用jQuery实现这一功能，通过分析给定代码片段，提炼出关键...

    jQuery全选与局部全选demo

    帮人写的小demo，很简单，jquery就十几行，没加样式，理解之上，免费放送 欢迎喜欢web前端开发的朋友加入关注前端，大家一起交流

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

    接下来，使用`$.each()`遍历`$checkArray`，检查每个复选框的`checked`属性。如果某个复选框被选中，`$check`的值就会增加。 `if($check==$checkArray.length)`这部分代码用于判断所有复选框是否都被选中。如果`$...

    DataGridView 复选框全选。

    接着，遍历所有行，将每个复选框的值设置为`allChecked`。 此外，为了确保数据的一致性，你可能还需要监听`CurrentCellDirtyStateChanged`事件，当用户直接在单元格内改变复选框状态时，强制控件更新其值： ```...

    jquery实现checkbox的全选和全不选

    jquery实现全选和全不选，只要有一个复选框没有选中，全选框不选中；

    jquery 、js实现复选框 (全选、反选)

    ### 使用jQuery和JavaScript实现复选框的全选与反选功能 在Web开发中，复选框（checkbox）是常用的一种交互元素，特别是在表格或列表中用于选择多个项目时非常实用。本文将详细介绍如何利用jQuery和原生JavaScript...

    jquery复选框_全选_反选_取消_选中输出等功能用jquery特效和jquery插件两种表单特效

    ### 使用jQuery实现复选框全选、反选、...&lt;title&gt;jQuery复选框全选反选取消选中输出等功能用jQuery特效和jQuery插件两种特效 &lt;script type="text/javascript" src="http://www.mailuke.com/js/jquery-1.2.6.pack.js"&gt; ...

    jquery全选反选全不选案例

    这段代码的意思是：当 "全选" 复选框被点击时，找到所有具有 `.childCheckbox` 类的子复选框，并将它们的 `checked` 属性设置为与 "全选" 复选框相同的状态。 此外，为了提供反选（即取消所有选中项）的功能，我们...

    一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    在本篇中，我们将深入探讨如何使用jQuery库来实现复选框的全选与全不选功能。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务，使得开发者能够更高效地编写代码。在这个示例中...

    jQuery实现复选框全选/取消全选/反选及获得选择的值

    jQuery实现复选框全选、取消全选、反选及...通过上述的讲解，我们可以看到，利用jQuery对复选框进行全选、取消全选、反选及获得选择的值的操作相对简单，只要熟练掌握jQuery选择器和遍历方法，就可以轻松实现这些功能。

    javascript复选框全选

    javascript 复选框全选，复选框全选，复选框全选

    checkbox全选/取消全选以及checkbox遍历jQuery实现代码

    "checkbox全选/取消全选以及checkbox遍历jQuery实现代码" CheckBox全选/取消全选是指在一个CheckBox组中，选择或取消选择所有CheckBox的功能。这种功能在实际应用中非常常见，例如在多选题中，用户可以选择所有选项...

Magicbox
Global site tag (gtag.js) - Google Analytics