jQuery学习笔记---获取表单值(Input Checkbox ListBox Button...)

最新推荐文章于 2021-06-04 18:44:00 发布
最新推荐文章于 2021-06-04 18:44:00 发布
阅读量2.9k 收藏 2
点赞数 1
分类专栏： jQuery 文章标签： input jquery function javascript button email
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hurryjiang/article/details/6904795
版权

1.关于jquery获取input的value问题               

$("")是一个jquery对象，而不是一个dom element
value是dom element的属性
jquery与之对应的是val
val() :获得第一个匹配元素的当前值。
val(val):设置每一个匹配元素的值。
所以，代码应该这样写：
取值：val = $("#id")[0].value;
赋值：
$("#id")[0].value =  "new value";
或者$("#id").val("new value");

或者这样也可以：val = $("#id").attr("value");
  
<html>
 <head>
 <title>jquery简单例子 yanleigis Email:landgis@126.com </title> 
<script type="text/javascript" src="jquery.js" ></script> 
<SCRIPT LANGUAGE="JavaScript">   
$(document).ready(function() {   
    
    $("#cylok").click(function() {  //只能使用id,前加# yanleigis Email:landgis@126.com 
      alert("Hello world cylok!");   
    });
      $("#ylok").click(function() {   
      alert("Hello world ylok!");   
    });
      $("a").click(function() {   
      alert("Hello world!");   
    });   

    $("#add6").click(function(){    
        alert("Hello world add!");
       });   
      
   $("#yltxt").bind("change",function(){   
      
      $("#yltxt")[0].value="yanlegis ok1";//方式一
       alert("方式二获得值："+$("#yltxt").attr("value")); 
      $("#yltxt").val("yanlegis ok2");//方法二
       alert("方式二获得值："+$("#yltxt")[0].value); 
      //$("#yltxt").attr("value")="yanlegis ok3";//方法三
 
        
    });   


});
 </SCRIPT>   
</head> 
<body> 

<p>
   <input type="button" id="ylok"  value="yanleigis">
   <input type="checkbox" id="cylok" value="landgis@126.com">
   <button id="add6">landgis@126.com</button>
   
  
<a href="" >Link</a> </p>
 <p>
   <input type="text" id="yltxt">
 </p>
 </body> 
</html>

2.获取checkbox的值

...继续

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()；//清空下拉框

 

=======================================

附：jquery 1.3.2对基本表单元素的取值方法
 

/*获得TEXT.AREATEXT的值*/var textval = $("#text_id").attr("value");//或者var textval = $("#text_id").val(); /*获取单选按钮的值*/var valradio = $("input[type=radio]:checked").val(); /*获取一组名为(items)的radio被选中项的值*/var item = $('input[name=items]:checked').val(); /*获取复选框的值*/var checkboxval = $("#checkbox_id").attr("value")； /*获取下拉列表的值*/var selectval = $('#select_id').val(); /*文本框，文本区域*/$("#text_id").attr("value",");//清空内容$("#text_id").attr("value",'test');//填充内容 /*多选框checkbox*/$("#chk_id").attr("checked",");//使其未勾选$("#chk_id").attr("checked",true);//勾选if($("#chk_id").attr('checked')==true) //判断是否已经选中 /*单选组radio*/$("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 /*下拉框select*/$("#select_id").attr("value",'test');//设置value=test的项目为当前选中项$("testtest2").appendTo("#select_id")//添加下拉框的option$("#select_id").empty()；//清空下拉框 /*获取一组名为(items)的radio被选中项的值*/var item = $('input[name=items]:checked').val(); //若未被选中 则val() = undefined /*获取select被选中项的文本*/var item = $("select[name=items] option:selected").text(); /*select下拉框的第二个元素为当前选中值*/$('#select_id')[0].selectedIndex = 1; /*radio单选组的第二个元素为当前选中值*/$('input[name=items]').get(1).checked = true; /*重置表单*/$("form").each(function(){.reset();});


 


 

 

Ai2015WER
关注
专栏目录
JQuery-zTree-v2.6.rar_Java 8_jquery tree_jquery-ztree-2.6.js_jqu
09-19
1、兼容 IE、FireFox、Chrome 等浏览器 2、在一个页面内可同时生成多个 ... 7、支持极其灵活的 checkbox & radio 选择功能 8、支持任意更换皮肤 / 个性化图标（依靠css） 9、简单的参数配置 实现 灵活多变的功能
记一次JS中数据表格的多选框的获取选中列的id方法
码不多的博客
09-09 1396
前言 记录一次，SpringBoot+vue项目中JS复选框获取id的方法 提示：以下是本篇文章正文内容，下面案例可供参考 一、HTML代码 批量删除按钮 <button type="button" class="btn btn-outline-success" onclick="vm.deleteinfo()">删除</button> 数据表格 <div class="row" style="overflow-y: scroll;max-height: 600px
Bootstrap学习实践笔记（三）
FED_AF的博客
05-22 453
组件：警告提示框、徽章、按钮、按钮组、卡片、轮播效果、折叠面板
表单标签
qq_40133908的博客
09-29 282
1、 checkboxlist标签 该标签可以一次性创建多个复选框，用于同时生成多个&lt;input type="checkbox".../&gt;的HTML标签，该标签根据list属性指定的集合来生成多个复选框。另外还有两个属性，listKey：该属性指定集合中的某个属性作为复选框的value，如果集合是Map，则可以使用key或者value来指定Map中的key或者value。listVa...
Bootstrap框架按钮
weixin_44538322的博客
04-15 342
撰写日期：2019年04月12日 Bootstrap框架是一个用于快速开发 Web 应用程序和网站的前端框架。里面有许多自定义好的类可以直接使用，这样可以大大加快我们编程效率，也减少了代码量。 按钮是大多数网站都会用到的，甚至有些网站还需要大小不一，颜色各异的按钮，这样每个按钮都要加一些...
Bootstrap 组件 Button 按钮
xiabenshu的博客
05-08 3221
按钮 使用Bootstrap 的自定义按钮样式对于一些行动在 表单中，对话框，和更多支持的多种大小、状态还有更多。 例子 Bootstrap包含几个预定义的按钮样式，每个样式都有自己的语义目的，还添加了一些额外的功能来实现更多的控制。 <button type="button" class="btn btn-primary">Primary</button> <bu...
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
10-17
而当msg属性的值发生变化时，绑定的input元素的值也会立即更新显示。 为了确保v-model指令能够正常工作，需要在Vue实例中指定一个元素作为挂载的目标，这通常是通过el选项来实现的，它期望一个CSS选择器字符串。在...
jquery.tagsinput.js实现记录checkbox勾选的顺序
10-16
在本文中，我们将深入探讨如何使用`jquery.tagsinput.js`插件来实现记录并保持`checkbox`勾选顺序的功能。`jquery.tagsinput.js`是一个jQuery插件，它提供了创建标签输入框的功能，允许用户以标签的形式输入数据。在...
Vue.js 中的 v-model 指令及绑定表单元素的方法
10-17
`v-model` 指令在 Vue 中用于实现视图和模型之间的双向数据绑定，它使得表单元素的值能够实时反映到 Vue 实例的数据对象中，反之亦然。在本文中，我们将深入探讨 `v-model` 的基础用法和在不同表单元素上的应用。 1...
ui-choose.js表单单选框复选框美化jQuery特效
06-10
本话题主要探讨的是如何使用"ui-choose.js"这个jQuery插件来美化表单中的单选框（radio）和复选框（checkbox），为用户提供更加美观且友好的交互体验。 首先，"ui-choose.js"是一个专为jQuery设计的轻量级插件，其...
Vue 2.0学习笔记：创建Button组件
W3cplus
02-05 7776
在上一节中，咱们学习了Vue中怎么创建组件。在这篇文章中我们以按钮组件为例，了解了怎么注册全局组件和局部组件。并且通过这些基础知识，可以轻易的创建类似于HTML中button元素效果的按钮组件。但这个组件非常的简陋，和我们想像的组件相差甚远。那么今天我们来看看，怎么在Vue中创建一个按钮组件。以Bootstrap的按钮为例很多人说Bootstrap很拙逼，灵活性不够。但我不这么认为，我是Boots
input标签中checkbox类型的相关操作总结
热门推荐
你就是我的世界
09-22 2万+
今天突然用到了input标签里的checkbox，发现还是有些概念不清不楚的，在这里总结一下。 一、checked属性 常用于input标签里type类型为checkbox和radio，是一个Boolean属性。规定在页面加载时预先被选定。可以通过js代码进行设置。 <input type="checkbox" name="hu" checked="checked"> ...
html checkboxlist写法 客户端html,js操作CheckBoxList实现全选/反选(在客服端完成)
weixin_42510188的博客
06-04 474
对于CheckBoxList控件来说，一方面要实现大量数据在服务器端的绑定工作，另一方面往往要求实现全选、反选等功能。虽然可以在服务器端完成这方面的工作，但这样一个简单的工作似乎更应该在客户端完成。具体方法：在页面中放入一个CheckBoxList控件，并添加几项，用来分析其产生的HTML代码，这样在使用js进行动态控制时，将会非常清晰其测试代码如下所示：RepeatColumns="3">...
input中checkbox样式修改，取值以及赋值
V199311的博客
05-29 2097
因为项目需要， 表格里面插入多选功能，因为select的动态载入数据兼容不好， 所以改用checkbox实现。 动态实例input为checkbox列表 , check的id和value记得赋值，实例的时候顺便把数据选中，checked的使用 if(params.length>0){ //结果长度大于0 for(let i in params){ let idName = "item"+i; let checkSta = ""; i
jquery实现列表中Checkbox选中与反选，及获取选中的值
suxuelian的博客
08-21 1508
在日常开发中我们经常会遇到列表中使用Checkbox全选数据进行操作，特总结一下。 全选与反选我这里采用了两种方式， 第一种：通过class进行选择 html代码： <table class="table-list" width="100%"> <thead> <tr&...
checkbox选择根据后台List数据进行回显
weixin_30542079的博客
12-30 880
需求：记住用户已经选择的 checkbox 选项，当用户再次对该 checkbox 进行选择操作时，应对该用户已经选择的checkbox 选项进行选中操作。 示例代码： checkbox,js遍历后台list $("#merchantSubclass").show(); var j = 0; var merchantCategoryList = "${merchantCategoryL...
四大列表控件之CheckBoxList控件（复选框）
老妖
12-11 1万+
Default.aspx &amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; &amp;gt; &amp;lt;head runat=&quot;server&quot;&amp;gt; &amp;lt;title&amp;gt;无标题页&amp;lt;/title&amp;gt; &amp;lt;/head&amp;
利用JQuery 来操作 ListBox和ListBox内移动
ama7449的博客
12-25 191
[导读]利用jquery 来操作 listbox和listbox内移动function listbox_move(listfrom,listto) { var size = $(" " + listfrom + " option") size(); var selsize = $(" " + listfrom + " option:s 利用jquery 来操作 listbox和...
.el-checkbox.is-indeterminate .el-checkbox__inner去掉减号样式
最新发布
12-29
根据提供的引用内容，可以通过修改CSS样式来去掉.el-checkbox.is-indeterminate .el-checkbox__inner元素的减号样式。具体的方法如下： ```css .el-checkbox.is-indeterminate .el-checkbox__inner { background-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值