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

 本篇文章主要是对jquery对单选框,多选框,文本框等常见操作进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

一、文本框、单选按钮、复选框、相关操作
 
 代码如下:
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>
 

时间: 2024-12-22 13:43:36

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

自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框_AngularJS

先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

js表单处理中单选、多选、选择框值的获取及表单的序列化_javascript技巧

本文总结了下在表单处理中单选.多选.选择框值的获取及表单的序列化,写成了一个对象.如下: var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value != '')

使用Jquery实现点击文字后变成文本框且可修改_jquery

使用Jquery实现点击文字变为文本框效果,可对文本框文字进行修改. 1.点击文字变为文本框 2.文本框自动全选文字 3.对文本框内容进行修改 4.点击文本框以外的地方文本框再次变为修改后的文字 5.同步更新SQL数据库内容 Html部分代码 复制代码 代码如下: <table width="200"> <tr> <td><b>ID</b></td> <td><b>名称</b>&

JS实现点击复选框将按钮或文本框变为灰色不可用的方法_javascript技巧

本文实例讲述了JS实现点击复选框将按钮或文本框变为灰色不可用的方法.分享给大家供大家参考.具体如下: 在注册时候经常会看不到,如果不点击阅读注册许可的话,提交按钮是灰色的,失效不能提交,必须点它一下,这个JS代码就是实现这样一个功能,只有你点击了确认提交,下边的按钮才生效. 运行效果如下图所示: 具体代码如下: <html> <head> <title>点击复选框按钮变为不可用</title> </head> <script> var

jquery怎么让循环的两个文本框的值相加

问题描述 jquery怎么让循环的两个文本框的值相加 怎么让两个循环出来的价格(reship文本框)旳值相加赋到(reship.reshipPrice文本框) 需要动态更新 每次更改deliveryQuantity文本框(数量) 时总金额要改变 //jquery代码 // 文本框的值改变时 $reshipDeliveryQuantity.keyup( function() { var $this = $(this); var maxDeliveryQuantity = $this.attr("m

javascript-在js中 如何用Jquery 获取一个文本框中的值 文本框中ID=A

问题描述 在js中 如何用Jquery 获取一个文本框中的值 文本框中ID=A 在js中 如何用Jquery 获取一个文本框中的值 文本框的ID=a 解决方案 $("#a").val()就是获取ID=A 的input的value值 解决方案二: $("#A").val() 解决方案三: js与jQuery获取文本框的值js获取文本框值JS获取文本框的值----------------------

jQuery实现动态表单验证时文本框抖动效果完整实例_jquery

本文实例讲述了jQuery实现动态表单验证时文本框抖动效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现的动态表单验证特效,当用户输入错误或没有输入的时候点击提交按钮,有问题的输入框会抖动几下,以提示用户此项有问题,文本框抖动功能都有意思,这个表单比较典型,想实现jquery Ajax表单功能的可以参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-txt-check-shake-style-codes

jsp-JSP包含一个下拉框和一个文本框,如何根据下拉框的值判断文本框是否必填?

问题描述 JSP包含一个下拉框和一个文本框,如何根据下拉框的值判断文本框是否必填? 如题,下拉框有1,2,3,4,5 五个选项,怎么判断下拉框的值,让选择1选项的时候必须填文本框的值,否则不必填.需要在JSP页面上实现. 解决方案 服务器端和客户端都要验证一遍.. <form method="post" onsubmit="return check(this)"> <select name="tp"><option

动态添加或减少文本框,并获取文本框值

原文:动态添加或减少文本框,并获取文本框值 很早之前,Insus.NET有实现过<点击一次铵钮产生一个新文本框,分别输入值,然后获取>http://www.cnblogs.com/insus/archive/2012/09/24/2700658.html .今天想再次演练它,不过是在asp.net mvc的环境之下,使用jQuery来实现.不使用web控件. 创建一个视图操作: 在视图中,放置两个铵钮和两个Div标签,当用动态加载的容器: 在视图中,添加jQuery的引用: <scrip