本文共 3313 字,大约阅读时间需要 11 分钟。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | <mce:script src= "jquery.js" mce_src= "jquery.js" ></mce:script><!--这是载入jquery.js文件,如果不使用jquery可以去掉--> <mce:script type= "text/javascript" ><!-- function chk(){ var obj=document.getElementsByName( 'test' ); //选择所有name="'test'"的对象,返回数组 //取到对象数组后,我们来循环检测它是不是被选中 var s= '' ; for ( var i=0; i<obj.length; i++){ if (obj[i].checked) s+=obj[i].value+ ',' ; //如果选中,将value添加到变量s中 } //那么现在来检测s的值就知道选中的复选框的值了 alert(s== '' ? '你还没有选择任何内容!' :s); } function jqchk(){ //jquery获取复选框值 var chk_value =[]; $( 'input[name="test"]:checked' ).each( function (){ chk_value.push($( this ).val()); }); alert(chk_value.length==0 ? '你还没有选择任何内容!' :chk_value); } // --></mce:script> 对checkbox的其他几个操作 1. 全选 2. 取消全选 3. 选中所有奇数 4. 反选 5. 获得选中的所有值 js代码 <!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>louis-blog >> jQuery 对checkbox的操作</title> <mce:script type= 'text/javascript' src= "http://leotheme.cn/wp-includes/js/jquery/jquery.js" mce_src= "http://leotheme.cn/wp-includes/js/jquery/jquery.js" ></mce:script> <SCRIPT LANGUAGE= "JavaScript" > <!-- $( "document" ).ready( function (){ $( "#btn1" ).click( function (){ $( "[name='checkbox']" ).attr( "checked" , 'true' ); //全选 }) $( "#btn2" ).click( function (){ $( "[name='checkbox']" ).removeAttr( "checked" ); //取消全选 }) $( "#btn3" ).click( function (){ $( "[name='checkbox']:even" ).attr( "checked" , 'true' ); //选中所有奇数 }) $( "#btn4" ).click( function (){ $( "[name='checkbox']" ).each( function (){ //反选 if ($( this ).attr( "checked" )){ $( this ).removeAttr( "checked" ); } else { $( this ).attr( "checked" , 'true' ); } }) }) $( "#btn5" ).click( function (){ //输出选中的值 var str= "" ; $( "[name='checkbox'][checked]" ).each( function (){ str+=$( this ).val()+ "/r/n" ; //alert($(this).val()); }) alert(str); }) }) --> </SCRIPT> </HEAD> <body style= "text-align:center;margin: 0 auto;font-size: 12px;" mce_style= "text-align:center;margin: 0 auto;font-size: 12px;" > <div style= "border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;" > <form name= "form1" method= "post" action= "" > <input type= "button" id= "btn1" value= "全选" > <input type= "button" id= "btn2" value= "取消全选" > <input type= "button" id= "btn3" value= "选中所有奇数" > <input type= "button" id= "btn4" value= "反选" > <input type= "button" id= "btn5" value= "获得选中的所有值" > <br /><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 </form> </div> </body> </HTML> |
转载地址:http://nkwva.baihongyu.com/