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

最新推荐文章于 2021-06-04 12:49:30 发布

原创最新推荐文章于 2021-06-04 12:49:30 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #F# #ViewUI

本文介绍了一个使用jQuery实现复选框选择与取消选择功能的示例，并展示了如何通过遍历方法eq(index)操作DOM元素。具体包括复选框值的收集与更新、全选功能实现等。

 <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>