JQuery对checkbox操作 (循环)

来源:互联网 发布:打字软件有什么 编辑:程序博客网 时间:2024/05/16 10:15

转自:http://www.cnblogs.com/shuang121/archive/2011/05/19/jquery.html

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DemoCheckBox.aspx.cs" Inherits="DemoCheckBox" %>


<!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 runat="server">
    
<title>无标题页</title>
    <script src="js/jquery-1.6.min.js" type="text/javascript"></script>
   <script type="text/javascript">
     jQuery(
function($){
     
//全选
       $("#btn1").click(function(){
          $(
"input[name='checkbox']").attr("checked","true");
       })
       
//取消全选
       $("#btn2").click(function(){
        $(
"input[name='checkbox']").removeAttr("checked");
       })
       
//选中所有基数
       $("#btn3").click(function(){
          $(
"input[name='checkbox']:even").attr("checked","true");
       })
       
//选中所有偶数
       $("#btn6").click(function(){
          $(
"input[name='checkbox']:odd").attr("checked","true");
       })
        
//反选
       $("#btn4").click(function(){
          $(
"input[name='checkbox']").each(function(){
            
if($(this).attr("checked"))
            {
               $(
this).removeAttr("checked");
            }
            
else
            {
             $(
this).attr("checked","true");  
            }
          
          })
       }) 
       
//或许选择项的值
       var aa="";
       $(
"#btn5").click(function(){
              $(
"input[name='checkbox']:checkbox:checked").each(function(){
              aa
+=$(this).val()
           
          }) 
          document.write(aa);
       })
        
     })
   
</script>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
   
<input type="button" id="btn1" value="全选">
   
<input type="button" id="btn2" value="取消全选">
   
<input type="button" id="btn3" value="选中所有奇数">
     
<input type="button" id="btn6" value="选中所有偶数">
   
<input type="button" id="btn4" value="反选">
   
<input type="button" id="btn5" value="获得选中的所有值">
   
<br>
   
<input type="checkbox" name="checkbox" value="checkbox1">
   checkbox1
   
<input type="checkbox" name="checkbox" value="checkbox2">
   checkbox2
   
<input type="checkbox" name="checkbox" value="checkbox3">
   checkbox3
   
<input type="checkbox" name="checkbox" value="checkbox4">
   checkbox4
   
<input type="checkbox" name="checkbox" value="checkbox5">
   checkbox5
   
<input type="checkbox" name="checkbox" value="checkbox6">
   checkbox6
   
<input type="checkbox" name="checkbox" value="checkbox7">
   checkbox7
   
<input type="checkbox" name="checkbox" value="checkbox8">
 checkbox8
    
</div>
    </form>
</body>
</html>
0 0
原创粉丝点击