zoukankan      html  css  js  c++  java

  • jquery操作input值总结

    获取选中的值
    获取一组radio被选中项的值
    var item = $('input[@name=items][@checked]').val();

     获取select被选中项的文本

    var item = $("select[@name=items] option[@selected]").text();

     select下拉框的第二个元素为当前选中值

    $('#select_id')[0].selectedIndex = 1; 

    radio单选组的第二个元素为当前选中值
    $('input[@name=items]').get(1).checked = true;

     获取值：

    文本框，文本区域：
    $("#txt").attr("value")；

    $("#txt").val(); 

    多选框checkbox：
    $("#checkbox_id").attr("value")；

     单选组radio：

    $("input[@type=radio][@checked]").val();

     下拉框select：

    $('#sel').val();

     控制表单元素：

    文本框，文本区域：
    $("#txt").attr("value",'');//清空内容
    $("#txt").attr("value",'11');//填充内容 

    多选框checkbox： 
    $("#chk1").attr("checked",'');//不打勾
    $("#chk2").attr("checked",true);//打勾
    if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 

    单选组radio：
    $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 

    下拉框select：
    $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
    $("<optionvalue='1'>1111</option><optionvalue='2'>2222</option>").appendTo("#sel")//添加下拉框的option
    $("#sel").empty()；//清空下拉框

     ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

    在Jquery中,用$("#id")来获得页面的input元素,其相当于document.getElementById("element")但是,该获取的是一个Jquery对象,而不是一个dom element对象.value是dom element对象的属性.所以,使用$("#id").value不能取到值取值的方法如下:

    取值：

    val = $("#id")[0].value;

    $("#id")[0].value = "new value";

    赋值：

    $("#id")[0].value = "new value";
    或者$("#id").val("new value");

    val = $("#id").attr("value"); 

    jquery input text radio check select 操作 

    [xhtml] view plaincopy
     
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5. <title>无标题文档</title>  
    6. <mce:script src="jquery-starterkit/lib/jquery-1.3.2.min.js" mce_src="jquery-starterkit/lib/jquery-1.3.2.min.js" type="text/javascript"></mce:script>  
    7. </head>  
    8. <body>  
    9. <input type="text" id="dd" name="dd" value="dds"/>dd  
    10. <input name="rr" id="rr" type="radio" value="34" />ff  
    11. <input name="rr" id="rr2" type="radio" value="4" />55  
    12. <input name="ff" type="checkbox" value="aa" />jgdg  
    13. <input name="ff" type="checkbox" value="gd" />jgdg  
    14. <select name="ss" id="ss" size="1">  
    15. <option value=""></option>  
    16. <option value="8">d</option>  
    17. <option value="2">g</option>  
    18. </select>  
    19. <br/>  
    20. <input type="button" id="button" value="按钮一" />  
    21. <input type="button" id="jj" value="按钮二" />  
    22. <br/>  
    23. <div id="ssd">fgfooHello</div>  
    24. </body>  
    25. <mce:script language="javascript" type="text/javascript"><!--  
    26. $(function(){  
    27.            $("#button").click(function(){  
    28.                       
    29.                                          
    30. //获取值  
    31. //alert( $('#dd').val());//type=text  
    32. // alert($('input[name=rr][checked]').val());//type=radio  
    33. // alert($('input[name=ff][checked]').val());//type=checkbox  
    34. // alert($("select[name=ss] option[selected]").val());//select 相等于alert($("#ss option[selected]").val());  
    35.                                       
    36. //获取文本  
    37. //alert($("select[name=ss] option[selected]").text());//select  
    38.                                       
    39. //控制  
    40. /*// Disable #dd 禁用  
    41. $("#dd").attr("disabled","disabled");  
    42. // Enable #dd 解禁  
    43. $("#jj").removeAttr("disabled");*/  
    44.   
    45. // $('input[name=rr]').get(0).checked = true;//第一个radio被选中  
    46. //alert($("input[type=radio][value=34]").attr("checked",'checked'));//value=34的radio被选中  
    47.                                       
    48. //alert($("input[type=checkbox][value=gd]").attr("checked",'checked'));//value=gd的checkbox被选中  
    49. //$('input[name=ff]').get(1).checked = true;//第一个check被选中  
    50.                                       
    51.                                       
    52.                                       
    53. /*//根据option的text选中option  
    54. count=$("#ss").find("option").length;  
    55. for(var i=0;i<count;i++)   
    56. {             
    57. if($("#ss").get(0).options[i].text == 'd')   
    58. {   
    59.     $("#ss").get(0).options[i].selected = true;   
    60.            
    61.      break;   
    62. }   
    63. } */  
    64.           
    65. //$("<option value='1'>1111</option><option value='25'>22s22</option>").appendTo("#ss");//增加option  
    66. //$("#ss option[value=8]").remove("");//除去 <option value='8'>d</option>  
    67.           
    68. //$("#ss").attr("value",'2');//选中option                              
    69. //$('#ss')[0].selectedIndex = 1;//选中option  
    70.                   
    71. //$("#ss").empty();//清空全部option  
    72.               
    73. /*//替换文本  
    74. var $thirdLink = $("#ssd");  
    75. var linkText = $thirdLink.text().replace('foo','bar');  
    76. $thirdLink.text(linkText); */  
    77.     });         
    78. });  
    79. // --></mce:script>  
    80. </html>  

     
  • 相关阅读:
    数据库主从同步相关问题
    前端使用node.js的http-server开启一个本地服务器
    css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位
    通过浏览器F12开发工具快速获取别的网站前端代码的方法
    vue打包app嵌入h5，区分app进入和android，ios显示不同的下载链接
    vue实现验证码倒计时60秒的具体代码
    vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题
    Cookie写不进去问题深入调查 https Secure Cookie
    vue配置手机通过IP访问电脑开发环境
    区块链名词解析：ICO、IFO、IEO和IMO，分别是什么呢？
  • 原文地址：https://www.cnblogs.com/ranran/p/3858289.html
Copyright © 2011-2022 走看看