logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

JQuery中对Radio和CheckBox的对比使用

 WindySky 2011-08-21

一. jQuery-对Radio/CheckBox的操作集合

 

view plaincopy to clipboardprint?
  1. jQuery获取Radio选择的Value值  
  2.   
  3. $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Value值   
  4.  $("#text_id").focus(function(){//code...}); //事件 当对象text_id获取焦点时触发   
  5.  $("#text_id").blur(function(){//code...}); //事件 当对象text_id失去焦点时触发   
  6.  $("#text_id").select(); //使文本框的Vlaue值成选中状态   
  7. $("input[name='radio_name'][value='要选中Radio的Value值'").  
  8. attr("checked",true); //根据Value值设置Radio为选中状态   
  9.   
  10. jQuery获取CheckBox选择的Value值  
  11.   
  12.  $("input[name='check']:checked");  
  13.   
  14.   
  15. $("input[name='checkbox_name'][checked]"); //选择被选中CheckBox元素的集合 如果你想得到   
  16. Value值你需要遍历这个集合  
  17. $($("input[name='checkbox_name'][checked]")).  
  18. each(function(){arrChk+=this.value + ',';});//遍历被选中CheckBox元素的集合 得到Value值   
  19. $("#checkbox_id").attr("checked"); //获取一个CheckBox的状态(有没有被选中,返回true/false)   
  20. $("#checkbox_id").attr("checked",true); //设置一个CheckBox的状态为选中(checked=true)   
  21. $("#checkbox_id").attr("checked",false); //设置一个CheckBox的状态为不选中(checked=false)   
  22. $("input[name='checkbox_name']").attr  
  23. ("checked",$("#checkbox_id").attr("checked"));//根据3,4,5条，你可以分析分析这句代码的意思    
  24. $("#text_id").val().split(","); //将Text的Value值以','分隔 返回一个数组  

 

 

二. jQuery实现CheckBox全选、全不选

 

view plaincopy to clipboardprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www./1999/xhtml">  
  3. <head runat="server">  
  4.     <title>Index</title>  
  5.   
  6.      <mce:script src="/Scripts/jquery-1.4.1.js" mce_src="Scripts/jquery-1.4.1.js" type="text/javascript"></mce:script>    <mce:script type="text/javascript"><!--  
  7.         $(function() {  
  8.             $("#CheckAll").click(function() {  
  9.                 var flag = $(this).attr("checked");  
  10.                 $("[name=subBox]:checkbox").each(function() {  
  11.                     $(this).attr("checked", flag);  
  12.                 })  
  13.             })  
  14.         })  
  15.       
  16. // --></mce:script>   
  17.   
  18. </head>  
  19. <body>  
  20.     <div>  
  21.         <input id="CheckAll" type="checkbox" />  
  22.         <input name="subBox" type="checkbox" />  
  23.         <input name="subBox" type="checkbox" />  
  24.         <input name="subBox" type="checkbox" />  
  25.         <input name="subBox" type="checkbox" />  
  26.     </div>  
  27. </body>  
  28. </html>  

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： WindySky > 《前端技术》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多