jquery 获取元素的值

最新推荐文章于 2024-09-12 10:06:54 发布
最新推荐文章于 2024-09-12 10:06:54 发布
阅读量1k 收藏
点赞数 1
分类专栏： jquery 文章标签： jquery input function javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gosi_/article/details/5966796
版权

jQuery获取Select选中的Text和Value（jquery学习备忘录）

 

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

jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关
获取一组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")；
多选框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的项目为当前选中项
                $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
                $("#sel").empty()；//清空下拉框

----------------------------------------------------------------------------------------------------

 

//遍历option和添加、移除option
function changeShipMethod(shipping){
var len = $("select[@name=ISHIPTYPE] option").length
if(shipping.value != "CA"){
$("select[@name=ISHIPTYPE] option").each(function(){
if($(this).val() == 111){
$(this).remove();
}
});
}else{
$("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));
}
}


//取得下拉選單的選取值

$(#testSelect option:selected').text();
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();
//
记性不好的可以收藏下：
1,下拉框:

var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option

稍微解释一下:
1.select[@name='country'] option[@selected] 表示具有name 属性，
并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素；
可以看出有@开头的就表示后面跟的是属性。

2,单选框:
$("input[@type=radio][@checked]").val(); //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

3,复选框:
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
alert($(this).val());
});

$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾


当然jquery的选择器是强大的. 还有很多方法.

<script src="jquery-1.2.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#selectTest").change(function()
{
//alert("Hello");
//alert($("#selectTest").attr("name"));
//$("a").attr("href","xx.html");
//window.location.href="xx.html";
//alert($("#selectTest").val());
alert($("#selectTest option[@selected]").text());
$("#selectTest").attr("value", "2");

});
});
</script>


<a href="#">aaass</a>

<!--下拉框-->
<select id="selectTest" name="selectTest">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
<option value="5">55</option>
<option value="6">66</option>
</select>
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组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")；
多选框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()；//清空下拉框

获取一组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")；
多选框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的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框







 摘自：http://www.offid.cn/i/564/note/100470.html

Gosi_
关注
专栏目录
jquery获取元素值的方法(常见的表单元素)
12-04
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关 获取一组radio被选中项的值 var item = $(‘input[name=items][checked]’).val(); 获取select被选中项的文本 var ...
Jquery 获取元素属性值
杨十八的博客
09-13 8145
获取属性 获取内置属性 获取自定义属性 prop( ‘value name’,‘value’) attr(‘value name’,‘value’) jquery中内置属性只能用来获取内置 自定义只能用来获取内置 内置属性 $('.checkall ').prop('checked')//获取值 $('.checkall ').prop('checked',true)//修改值 自定义属性 $('.checkall ').attr('indexx')//获取值 $('.checkall
JQuery获取元素的N种方法
热门推荐
Java仗剑走天涯
06-12 1万+
一.根据标签属性或属性值获取 二.根据标签选择器以及父子节点获取指定元素
JQuery
最新发布
m0_63233901的博客
09-12 1362
https://www.cnblogs.com/alex-hrg/p/9617294.html 例子。https://www.runoob.com/js/js-regexp.html 基础。$(选择器).css({属性1：值1,属性2：值2});/正则表达式主体/修饰符(可选) RegExp()$(选择器).attr(HTML属性,值);$(选择器).each(function(下标,值){$(选择器).submit(function(){$(选择器).change(function(){
jQuery获取元素
emool的博客
12-18 7640
简单总结一下获取元素的一些方法， 可以通过jq选择器获取可以通过关系节点获取. 1.基本选择器 符号 说明 $(‘#demo’) 选择 id 为 demo 的元素 $(‘.demo’) 选择 class 为 demo 的所有元素 $(‘div’) 选择所有 div 标签元...
jquery获取元素值
大庄园
01-04 590
01 jquery取radio单选按钮的值 02 $("input[name='items']:checked").val(); 03 jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关 04 获取一组radio被选中项的值 05 var item = $('input[name=ite
jQuery实现获取元素索引值index的方法
10-21
在使用jQuery进行前端开发时，我们常常需要获取元素在集合中的索引值以便进行进一步的操作。jQuery作为一个强大的JavaScript库，提供了一系列方法来简化DOM操作，其中“.index()”方法便是用于获取元素索引值的一种...
jquery获取radio值实例
10-25
jQuery获取radio值实例的知识点主要包括以下几个方面： 1. jQuery基础概念： jQuery是一个快速、小巧、功能丰富的JavaScript库，它通过封装DOM操作、事件处理、动画、Ajax等功能简化了JavaScript编程。在处理radio...
jQuery中获取Radio元素值的方法
10-27
### jQuery中获取Radio元素值的方法知识点 #### 1. jQuery基础选择器 在jQuery中，可以使用多种选择器来选取页面中的元素。对于获取单个或多个特定元素，如radio按钮的值，可以使用以下几种方式： - 类选择器：...
jq获取元素的值 、获取相同name元素的值、删除追加html内容、处理事件重复绑定问题
新一的博客
07-01 2550
1jq获取元素的值 html() 它获取的第一个匹配元素的内容，也就是所取得的标签所包含的所有东西。text() 它获取的是所有匹配元素的内容，而不会选取标签。 同理，text(val)是设置所有匹配元素的文本内容val() 用来操作标准的表单组件对象，如button,text,hidden.想要修改val值，一般用修改属性及值得attr()方法 //给单选赋值 $...
jquery获取指定元素的指定属性的值
m0_62639693的博客
09-09 3341
jquery获取指定元素的指定属性的值 选择器.attr("属性名")--------------->用来获取那些值不是true/false的属性的值. 选择器.prop("属性名")--------------->用来获取值是true/false的属性的值.例如：checked,selected,readonly,disabled等。
js、jq获取元素的各种方法
wjw233333的博客
09-26 2940
引言 查找元素是前端中用的非常多的方法，工作中做项目的话也会经常用到，下面就总结归纳一下js以及jq的查找元素的方法吧。 正文 一. js获取元素方法归纳 1. 通过id获取 document.getElementById('id') //根据id获取 2. 通过name获取 document.getElementByName('name') // 通过...
2020-10-13
weixin_42963238的博客
10-13 176
js获取dom元素的子元素,父元素,兄弟元素小记 //原生js var a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.childNodes; //获取a的全部子节点； var c = a.parentNode; //获取a的父节点； var d = a.nextSibling; //获取a的下一个兄弟节点 var e = a.previousSibl
Jquery 获取元素的方法
zheshihuahua的博客
04-25 2299
lt(index) $('p:lt(2)') index从0开始，获取index小于（不包含）2的所有元素。:gt(index) $('p:gt(2)') index从0开始，获取index大于（不包含）2的所有元素。:contains(text) $('p:contains(Hello)') 获取所有包含文本为Hello的元素，中间的文本区分大小写。
（十五）jQuery 获取元素的方法总结
北斗星的爱886的博客
07-08 1852
1、parent()方法 获取被选元素的直接父元素。 效果： 2、parents()方法 获取被选元素所有的祖先元素（包括body、html标签）。 效果： 3、children()方法 获取被选元素的所有直接子元素 效果： 4、find()方法 获取被选元素的后代元素，一路向下直到最后一个后代。 效果： 5、siblings()方法 获取除了被选元素之外的其他同级元素 效果： 6、next()方法 获取被选元素的下一个同级元素。 效果： 7、nextAll()
javascript通过jquery获取表单元素/控件值和设置值的方法
DTCloud
09-19 948
，通过属性选择控件时，通过"type[属性=?]"的方式进行选择，比如$(“input[name=username]”)。其中id是控件的id属性。如果没有id属性，只有name属性，则可以采用下面的写法。jquery通过id获取对象时，在id名称的前面添加#号（比如。这里[0]表示从相同id的数组元素中获取第一个元素。设置select下拉框的第二个元素为当前选中值。val() :获得第一个匹配元素的当前值。val(val):设置每一个匹配元素的值。设置value=opt1的项目为当前选中项。
Jq获取元素内容的三种方式
菜鸟逆袭之路
08-08 4223
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"
JQuery获取元素
weixin_58526727的博客
07-21 2870
jQuery jQuery 是一个高效、精简并且功能丰 富的 JavaScript 工具库 由John Resig 在 2006 年 1 月，jQuery 正式发布 query 本身是选择的意思，主要对 JavaScript 中的选择元素的方法进行了大量的优化。 版本发展 1.X：兼容 IE6/7/8，是工作中最常使用的，学习 1.12 版本。 2.X：不兼容 IE6/7/8，多用于 jQuery 官方调整 bug 使用。工作中不使用。 3.X：不兼容 IE6/7/8，只能在高版本浏览器中使用，是现在
jQuery 获取表单元素值的方法
"本文主要介绍如何使用jQuery来获取和设置HTML中的input元素值，包括radio、checkbox和select的选择状态。" 在Web开发中，jQuery库提供了一种简洁的方式来操作DOM元素，其中包括获取和设置input元素的值。以下是对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值