Jquery—JQuery对radio的操作(01)

来源:互联网 发布:淘宝的访客数和浏览量 编辑:程序博客网 时间:2024/06/06 00:13

        JQuery对radio的操作是多方面的,不能穷尽的,在这里先总结一下工作过程中用到的一些操作,以后再遇到其它的关于JQuery对radio的操作再做总结:

        1、禁用或启用radio标签:

             <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
             <html>
                       <head>
                                  <title>JQuery对radio的操作——禁用或启用radio标签</title>
                                  <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
                                  <script type="text/javascript" src="./jquery-1.6.2.js"></script>
                      </head>
                      <body>
                                  <input type="radio" name="fruit" value="1"/>香蕉<input type="radio" name="fruit" value="2" checked="checked"/>苹果<input type="radio" name="fruit" value="3"/>菠萝&nbsp;&nbsp;&nbsp;<input type="button" value="禁用" onclick="javascript:disable();">&nbsp;&nbsp;&nbsp;<input type="button" value="启用" onclick="javascript:clearDisable();">
                                 <script type="text/javascript">
                                           function disable(){
                                                       $("input:radio[name='fruit']").attr("disabled","disabled");
                                           }
                                           function clearDisable(){
                                                       $("input:radio[name='fruit']").attr("disabled", false);
                                          }
                                 </script>
                       </body>
              </html>

        2、选中特定radio选项:

             <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
             <html>
                      <head>
                                 <title>JQuery对radio的操作——选中特定radio选项</title>
                                 <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
                                 <script type="text/javascript" src="./jquery-1.6.2.js"></script>
                       </head>
                       <body>
                                <input type="radio" name="fruit" value="1"/>香蕉<input type="radio" name="fruit" value="2"/>苹果<input type="radio" name="fruit" value="3"/>菠萝
                                <script type="text/javascript">
                                           $("input:radio[name='fruit'][value='2']")[0].checked = true;//选中“苹果”项
                                </script>
                      </body>
             </html>

        3、获取选中radio的value值和判断是否选择了radio选项:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <html>
                    <head>
                                <title>JQuery对radio的操作——获取选中radio的value值和判断是否选择了radio选项</title>
                                <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
                                <script type="text/javascript" src="./jquery-1.6.2.js"></script>
                  </head>
                  <body>
                                <input type="radio" name="fruit" value="1"/>香蕉<input type="radio" name="fruit" value="2"/>苹果<input type="radio" name="fruit" value="3"/>菠萝
                                <input type="button" value="判断" onclick="javascript:checkFruit();">
                                <script type="text/javascript">
                                           function checkFruit(){
                                                       var fruitId = $('input:radio[name="fruit"]:checked').val();//获取选中radio的value值
                                                       if(fruitId == undefined) {//判断是否选择了radio选项
                                                                 alert("您没有选择任何数据!");
                                                       }else{
                                                                 alert("您选择的数据ID为:" + fruitId);
                                                      }
                                         
}

                               </script>

                 </body>
         </html>              

        【0分下载Demo

0 0