`
chengyu2099
  • 浏览: 474222 次
  • 性别: 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
评论
发表评论

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

相关推荐

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