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