jQuery checkbox简单实用技巧(一)

今天因为学校系统需要更改,要把原先的教师内容显示换成一个可以选中发短信的checkbox,由于前系统全部使用纯Javascript未免有些不习惯,所以这里采用了jQuery创建了简单的实例参考,由我跟我朋友吉兆一起完成(本人jQuery水平有限请见谅),简单的代码如下:

<!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>   
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  <title>jQuery</title>   
 <style type="text/css">   
 ul li{list-style:none;}    
ul li.menu{position:relative;width:120px;}    
ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;}    
 ul li.menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;}</style>   
 <script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>   
<script language="javascript" type="text/javascript">   
$(document).ready(function(){    
  $(".menu").hover(    
         function(){    
             $(".content").fadeIn(800);         
           // $(".content").slideDown(800);        
         },function(){    
             $(".content").fadeOut(1000)        
         //    $(".content").slideUp(1000)     
         });    
 })    
 </script>
<script type="text/javascript"><!-- 
var num =  0;
var f_str="";
$(function() { 

$("input[name='checkbox_name[]']").click(
    function(){
        num =$("input[name='checkbox_name[]']:checked").length;
        f_str="";
        $("input[name='checkbox_name[]']").each(
        function(){
            if($(this).attr("checked")==true){
                f_str += $(this).attr("value")+",";
            }
        });
    
        $("#input").html("当前所有老师"+num+"个老师:"+f_str);
    }
);

$("#checkedAll").click(function() { 
if ($(this).attr("checked") == true) { 
$("input[name='checkbox_name[]']").each(function() { 
$(this).attr("checked", true); 
f_str += $(this).attr("value")+",";
num =$("input[name='checkbox_name[]']:checked").length;
});
    
$("#input").html("当前所有老师"+num+"个老师:"+f_str); 
} else { 
$("input[name='checkbox_name[]']").each(function() { 
$(this).attr("checked", false); 

});
f_str="";
num =$("input[name='checkbox_name[]']:checked").length;
$("#input").html("当前所有老师"+num+"个老师"+f_str); 
}

}); 
$("#input").html("当前所有老师"+num+"个老师"); 
}); 

// --> 

</script> 
 </head>   
 <body>   
 <div>
     <ul>   
         <li class="menu">   
         <input type="checkbox" value="hehe" name="checkedAll" id="checkedAll">高中老师
             <ul class="content">   
                <li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="老师1">老师1 </li>   
                 <li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="老师2">老师2 </li>   
                 <li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="老师3">老师3 </li>   
                 <li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="老师4">老师4 </li>   
                 <li><input name="checkbox_name[]" id="checkbox_name" type="checkbox" value="老师5">老师5 </li>   
             </ul>   
        </li>   
    </ul>   
    </div>
    <div id="input">
    </div>

 </body>   
 </html>

只要复制上去就可以直接使用了,功能如下:可以单选,选中可以得到所选中的值,可以全选,或者全取消

posted @ 2010-07-03 00:58  EdwardLau  阅读(456)  评论(0)  编辑  收藏  举报