<script src="jquery-1.4.2.js"></script>
<script>
$(document).ready(function(){
$("div").eq(2).addClass("blue");
/*--------------复选框操作----------------*/
function delArrayValue(totalStr,cVal){
// alert(cVal);
var arr = totalStr.split(",");
var strArr;
for(var i=0;i<arr.length;i++){
//比较传入的需删除的值如果和数组中的相同，则删除该下标的数组。
if(arr[i]==cVal)
{
strArr = arr.splice(i,1); //返回删除的元素
}
/*if(i==k){
strArr = arr.splice(k,1); //返回删除的元素
}
*/
}
//alert("strArr-->"+strArr);
// var remain = totalStr.indexOf(strArr);
//var strRem = totalStr.substr(remain+1);
//alert(remain);
alert(arr);
return arr;
}
//单击选中复选框时，触发该事件并获得选中复选框的值。
$("[name=item]:checkbox").click(function(){
var checkAllValue = "";
var _hid = $(this).val();
var totalStr = $("#f_checkAllId").val();
var _ischek;
if(this.checked){
if(totalStr!="") totalStr=totalStr+",";
totalStr = totalStr +_hid;
//alert("ss-->"+totalStr);
checkAllValue = totalStr;
}else{
var _hidDel = $(this).val();
//var a =_hidDel.indexOf();
//alert(totalStr.length);
//alert("_hidDel"+_hidDel);
//checkAllValue = delvalue(totalStr,_hidDel );
//var i = $("[name=item]:checkbox").index(this);
//alert("i-->"+i);
checkAllValue = delArrayValue(totalStr,_hidDel);
}
//alert(totalStr);
//alert(checkAllValue);
$("#f_checkAllId").val(checkAllValue);
});
//全选与全不选
$("#checkedAll").click(function(){
if(this.checked){
var strValue = $("#f_checkAllId").val();
//此处判断，如果已有选中的复选框，则将选中的值清空，再通过下面的each循环来获得所有获中的值
if(strValue!="") strValue="";
$("[name=item]:checkbox").attr("checked",true);
}else{
var strValue = "";
$("[name=item]:checkbox").attr("checked",false);
}
//经分析，可将上面的简写如下：
// $("[name=item]:checkbox").attr("checked",this.checked);
//但根据实际需要还是用上面一种写法
//当全选框选中时，将执行下面的循环
$("[name=item]:checkbox:checked").each(function(){
if(strValue!="")
strValue+=","+$(this).val();
else strValue=strValue+$(this).val();
});
$("#f_checkAllId").val(strValue);
});
});
</script>
<style>
div { width:60px; height:60px; margin:10px; float:left;
border:2px solid blue; }
.blue { background:blue; }
</style>
</head>
<body>
<p>
<strong>jquery 遍历 eq(index)</strong><br />
eq(index)
从匹配元素集合中得到索引为‘index’的元素
<br /><br />
$("div").eq(2).addClass("blue");
匹配div元素集合中索引为2的div元素
</p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<input type="text" id="f_checkAllId" name="f_checkAllId" value="" size="60"/><input type="checkbox" name="checkedAll" id="checkedAll" />全选/不选<br />
<input type="checkbox" name="item" value="1" />
<input type="checkbox" name="item" value="3" />
<input type="checkbox" name="item" value="10" />
<input type="checkbox" name="item" value="12" />
<input type="checkbox" name="item" value="30" />
<input type="checkbox" name="item" value="33" />
<input type="checkbox" name="item" value="135" />
<input type="checkbox" name="item" value="142" />
</body>
分享到：
相关推荐
一个js的方法，调用该js可实现下拉复选框。 /**//** * Creat date 2011-11-10 * Creat by zhuoyueping *支持input表单的下拉复选框。 *使用方法： * (1)调用js函数：setSelectBox(textItem, myArray); *...
jQuery实现复选框checkbox的全选与反选功能，不用多介绍了吧，以往都是基于纯js的实现比较多，这个是引入了jquery，或许更能满足现在的前端设计吧。
Prototype与jQuery美化Checkbox复选框实例.zip
本文实例讲述了jquery复选框多选赋值给文本框的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title...
主要介绍了js与jQuery实现checkbox复选框全选/全不选的方法,结合实例较为详细的分析了JavaScript与jQuery针对checkbox复选框全选与反选的操作技巧,需要的朋友可以参考下
jquery 实现复选框的全选操作实例代码 最近做了个需求，需要实现列表复选框的全选/取消全选操作，由于之前对这块不是很了解，所以从网上查了一些资料，虽然有各种实现方法，但没找到直接可以套用的。自己琢磨了下，...
主要介绍了jQuery实现获取选中复选框的值，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JQuery实现简单的复选框树形结构图。分享给大家供大家参考，具体如下： 这是自己写的简单树形结构图，实现的功能有： 1.最左边的按钮实现子目录的隐藏和显示 2.点击父节点的复选框选中后,父节点下的...
主要介绍了jQuery获取复选框被选中数量及判断选择值的方法,结合实例形式分析了jQuery操作复选框进行判定与统计的相关技巧,非常具有实用价值,需要的朋友可以参考下
介绍了jQuery checkbox复选框全选功能的代码实例，有需要的朋友可以参考一下
下面小编就为大家分享一篇jQuery+SpringMVC中的复选框选择与传值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
下面小编就为大家带来一篇jquery模拟多级复选框效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
context (Element, jQuery) : (可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象。 示例 找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。 HTML 代码: <p>one</p> <div><p>two</p></div> <p>three...
本文实例讲述了jQuery实现遍历复选框的方法。分享给大家供大家参考，具体如下： 1、问题背景： 这里有10个复选框，根据选择的复选框获取其值，并将其值用“——”连接，插入到div中 2、实现代码： <!DOCTYPE ...
本文实例讲述了jquery判断复选框是否选中进行答题提示特效代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： 一、实现的原理： 第一步：判断用户选择哪一项，即哪个复选框被选中 第二步：...