日历

« 2008-07-25  
  12345
6789101112
13141516171819
20212223242526
2728293031  

RSS订阅

jquery第二天:与表单元素的交互

2007-06-05 16:00:08 / 个人分类:Jquery

<html>
 <head>
 <scrīpt type="text/javascrīpt" src="jquery.js"> </scrīpt>
 <scrīpt type="text/javascrīpt" src="js.js"></scrīpt>

 </head>
 <body>
  <p>
    sel
      <select name="select\" id="sel" style="width:180">
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
 </p>
 <p>name
   <input name="textfield" type="text" id="usrname" value="_3_" >
 </p>
  <p>
    <label>
    <input name="rad_g" type="radio\" id="rad1" value="1">
单选1</label>
    <br>
    <label>
    <input name="rad_g" type="radio" id="rad2" value="2">
单选2</label>
  </p>
  <p>
    <input type="checkbox\" name="chk1" id="chk1" value="checkbox1">
  chk1
    <input type="checkbox" name="chk2" id="chk2" value="checkbox2">
chk2</p>
  <p>&nbsp;</p>
  <p><br>
    <input name="button" type="button" id="btn" value="显示所有值">
    <input type="submit" name="ok" id="ok" value="打勾" >
    <input name="all_check" type="button" id="all_check" value="全部打勾">
    <input type="button" name="gh" id="gh" value="单选1">
    <input type="button" name="sel_btn" id="sel_btn" value="当前下拉框索引">
    <textarea name="text" cols="65" rows="8" id="txt" >111111</textarea>
  </p>
 </body>
</html>





//--------------------------------------------------------------------------------
$(document).ready
(   
  function ()
  {
    var msg=function()
       {
        var v=$("#sel").attr("value")+$("#usrname").attr("value")+$("input[@name=rad_g][@checked]").attr("value")+$("input[@id=chk1][@checked]").attr("value");       
        $("#txt").attr("value","");
        $("#txt").attr("value",v);
       }
      
     var chk_index=function()
        {
         if( $("#chk1").attr('checked')==undefined)    
              $("#chk1").attr('checked','true');
         else     
              $("#chk1").attr('checked','');
        }
   
    var rad_index=function()
    {
      $("#rad1").attr("checked","true");
    }
   
    var sel_index=function()
    {
    document.getElementById("sel").value=2;
    }
   
    var all_check=function()
    {
      if($("input[@type=checkbox]").attr("checked")==undefined)
         $("input[@type=checkbox]").attr("checked","true");   
      else     
         $("input[@type=checkbox]").attr("checked","");   
    }
   
    //$("#link").click(function(){$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")} );
    //$("#sel").hover(function(){$("#sel").empty();$("#sel").html("<option value='1'>1111</option><option value='2'>2222</option>");});
   // $("#btn").click(function(){alert($("#sel").text());});
    $("#btn").click(msg);   
    $("#ok").click(chk_index);
    $("#gh").click(rad_index);
    $("#sel_btn").click(sel_index);
    $("#all_check").click(all_check);
  }
);





相关阅读:

TAG: jquery select radio checkbox Jquery

timmimiboy的个人空间 删除 Guest 发布于2008-05-25 23:06:44
http://column.iresearch.cn/u/fdytxz/ 小冯的专栏
http://www.xingchenbian33.cn 坏蛋是怎样炼成的
http://blog.csdn.net/fdy1txz/ 小说社区
http://www.jipinjiading36.cn   极品家丁
http://www.meinv880.cn 我的美女大小姐
http://column.iresearch.cn/u/fdy2txz/ 心情驿站
http://blog.csdn.net/fdy2txz/ 流动的小说站
http://www.5pr5.cn 极品公子
77578790的个人空间 删除 77578790 发布于2007-06-05 16:03:01
功能:自定义函数,学会了获取以及设置select,radio,checkbox等表单元素的值,可以完全与这些表单元素交流和控制,还可以在query函数里面使用标准的javascript语法。
Open Toolbar