如何使用jquery获取name相同的input,并将其封装json使用ajax进行异步提交

如何使用jquery获取name相同的input,并将其封装json使用ajax进行异步提交,第1张

var arr = [];\x0d\var $test = $("input[name=test]");//假设name为test\x0d\for(var i=0;i回答于 2022-11-16

根据多选框name来获得选中的值可用如下 jquery代码实现

$("input:checkbox[name='test']:checked")each(function() { // 遍历name=test的多选框

  $(this)val();  // 每一个被选中项的值

});

实例演示:给出两组多选框,点击按钮后分别获得两组中被选择的项目

示例代码如下

创建Html元素

<div class="box">

<span>请输入用户名,限定字母、数字或下划线的组合:</span><br>

<div class="content">

<span>水果:</span><br>

<input type="checkbox" name="fruit" value="梨子"/>梨子

<input type="checkbox" name="fruit" value="李子"/>李子

<input type="checkbox" name="fruit" value="栗子"/>栗子

<input type="checkbox" name="fruit" value="荔枝"/>荔枝<br>

<span>蔬菜:</span><br>

<input type="checkbox" name="vegetable" value="青菜"/>青菜

<input type="checkbox" name="vegetable" value="萝卜"/>萝卜

<input type="checkbox" name="vegetable" value="土豆"/>土豆

<input type="checkbox" name="vegetable" value="茄子"/>茄子

</div>

<input type="button" value="提交">

</div>

设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

input[type='checkbox']{margin:5px;}

input[type='button']{height:30px;margin:10px;padding:5px 10px;}

编写jquery代码

$(function(){

// 设置属性

$("input:button")click(function() {

var fruit = "";

var vegetable = "";

$("input:checkbox[name='fruit']:checked")each(function() {

fruit += $(this)val() + " ";

});

$("input:checkbox[name='vegetable']:checked")each(function() {

vegetable += $(this)val() + " ";

});

alert("已选择水果:"+fruit+",已选择蔬菜:"+vegetable);

});

})

观察效果

attr(name|properties|key,value|fn)

参数

nameStringV10

属性名称

properties MapV10

作为属性的“名/值对”对象

key,value

String,ObjectV10

属性名称,属性值

key,function(index, attr)

String,FunctionV11

1:属性名称。

2:返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。

参数name 描述:

返回文档中所有图像的src属性值。

jQuery 代码:

$("img")attr("src");

name是input标签的属性值,jQuery提供了attr() 方法用于设置/改变属性值

$("input:text")attr("name");

$("input:text")prop("name"); // 也可以使用prop()方法获取属性

示例代码如下

创建Html元素

<div class="box">

<span>点击按钮获取文本框的name属性值:</span><br>

<div class="content">

<input type="text" name="test" value="这个文本框的name属性值为test">

</div>

<input type="button" class="btn" value="获取文本框name值">

</div>

设置css样式

divbox{width:300px;height:250px;padding:10px 20px;margin:20px;border:4px dashed #ccc;}

divbox>span{color:#999;font-style:italic;}

divcontent{width:250px;height:100px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}

input[type='text']{width:200px;height:30px;border:none;}

input[type='button']{width:120px;height:30px;margin:10px;border:2px solid #ebbcbe;}

编写jquery代码

$(function(){

$("input:button")click(function() {

alert($("input:text")attr("name"));

});

})

jquery有text()、html()、val()这三种获得标签内容的方法;

补充:

根据ID获取:$("#idName")text(),

根据标签名获取:$("p")text(),

根据类名获取:$(“class1”)text()

以上就是关于如何使用jquery获取name相同的input,并将其封装json使用ajax进行异步提交全部的内容,包括:如何使用jquery获取name相同的input,并将其封装json使用ajax进行异步提交、jquery如何根据多选框name来获得选中的值。、jquery中怎么获取name属性等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9516202.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-29
下一篇 2023-04-29

发表评论

登录后才能评论

评论列表(0条)

保存