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 相关文章推荐
用js判断页面是否加载完成实现代码
Dec 11 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
用JS写一个发布订阅模式
Nov 07 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
php 如何获取数组第一个值
2013/08/06 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python import自定义模块方法
2015/02/12 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
Python数据正态性检验实现过程
2020/04/18 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
几个SQL的面试题
2014/03/08 面试题
写给女朋友的检讨书
2014/01/28 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
投标诚信承诺书
2014/05/26 职场文书
应届大学生自荐书
2014/06/17 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
科学发展观演讲稿
2014/09/11 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技