jquery对单选框,多选框,文本框等常见操作小结


Posted in Javascript onJanuary 08, 2014

一、文本框、单选按钮、复选框、相关操作

var sex=$("input[name='sex']:checked").val();   //获取一组radio被选中项的值  
var item=$("#sel option:selected").text();      //获取select被选中项的文本  
var option_num=$('#sel').val();                 //获取select项目索引 
$("#sel")[0].selectedIndex =1;                  //select下拉框的第二个元素为当前选中值 
$("input[name='sex']").get(1).checked=true;     //radio单选组的第二个元素为当前选中值 
 或者对单选框默认选定设置: 
$("input[name='sex']").each(function(){ 
            if($(this).val()==s){ 
                $(this).attr("checked",true); 
                                //this.checked=true; 
            } 
        });

Jquery 根据value值设置下拉列表(select)默认选中项
  <select name=sel onchange="bao(this.options[this.options.selectedIndex].value)">
  <option value="">请选择
  <option value="1">Item 1
  <option value="2">Item 2
  <option value="3">Item 3
  </select>
  <script>
  function bao(s)
  {
     txt.value=s;
     //选择后,让第一项被选中,这样,就有Change啦.
     document.all.sel.options[0].selected=true;
 }
 </script>
 <textarea id=txt></textarea>

二、 jQuery获取 Select选择的Text和Value
语法解释:
 $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项 时触发
 var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
 var checkValue=$("#select_id").val();  //获取Select选择的Value
 var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
 var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值 
jQuery设置Select选择的Text和Value:
语法解释:
 $("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
 $("#select_id ").val(4);   //设置Select的Value值为4的项选中
 $("#select_id option[text='jQuery']").attr("selected", true);   //设置 Select的Text值为jQuery的项选中
jQuery添加/删除Select的Option项:
语法解释:
 $("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项)
 $("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置)
 $("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)
 $("#select_id option[index='0']").remove();  //删除Select中索引值为0的 Option(第一个)
 $("#select_id option[value='3']").remove();  //删除Select中Value='3'的 Option
 $("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option

应用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery common</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //初始化下拉列表--动态添加
        var item = ['幼儿园','小学','初中','高中','大学','研究生','博士','硕士'];
        var html ="<option value='0'>请选择</option>";
        for (var i = 0;i < item.length;i++){
            html += "<option value='"+(i+1)+"'>"+item[i]+"</option>";
        }
        $("#grade").empty().append(html);
        $("#grade option[value='0']").attr("selected","selected");//默认第一项被选中
    })
    //为Select添加事件,当选择其中一项时触发
    function showIt(){
        var selectText = $("#grade option:selected").text();//获取Select选择的Text
        //var selectText = $("#grade").find("option:selected").text();//这种方式也可行
        var selectValue = $("#grade").val();//获取被选择的value
        var selectIndex = $("#grade").get(0).selectedIndex//获取select的索引值
        var text = '选择:'+selectText+"\n";
        text +='value值:'+selectValue+"\n";
        text +='索引值:'+selectIndex;
        $("#text").text(text);
    }
</script>
</head>
<body>
    <div>
        <select name='grade' id='grade' onchange="showIt()"></select>
        <p><textarea name='text' id='text' row='30' col='100'></textarea></p>
    </div>
</body>
</html>
Javascript 相关文章推荐
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
css配合jquery美化 select
Nov 29 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
代码解析React中setState同步和异步问题
Jun 03 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 #Javascript
js获取当前页面路径示例讲解
Jan 08 #Javascript
js获取当前路径的简单示例代码
Jan 08 #Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 #Javascript
jquery 图片缩放拖动的简单实例
Jan 08 #Javascript
document.execCommand()的用法小结
Jan 08 #Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 #Javascript
You might like
基于pear auth实现登录验证
2010/02/26 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
基于js文件加载优化(详解)
2018/01/03 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
详解Vue中的watch和computed
2020/11/09 Javascript
Python上传package到Pypi(代码简单)
2016/02/06 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
python中常见错误及解决方法
2020/06/21 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
python 爬虫请求模块requests详解
2020/12/04 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
节水倡议书范文
2014/04/15 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
迁户口计划生育证明
2014/10/19 职场文书
党的作风建设心得体会
2014/10/22 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL