
<!DOCTYPE HTML>
<html>
<head>
<meta >
2、使用val()获取值。
3、保存文件,查看属性选择器获取的值。
4、然后在script里添加一个function,按钮事件的函数。使用jquery的 attr方法来设置属性就行了,参数第一个是要添加的属性名,第二个就是属性的值。这里我们为div添加一个id属性。
5、保存文件,查看attr()就可以获取的属性值。
根据多选框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);
});
})
观察效果
1、根据name取值:
<input name="inp" type="text" value="aaa">
<input name="inp" type="text" value="bbb">
<input name="inp" type="text" value="ccc">
$("input[name='inp']")val()
2、根据name取值遍历:
<input name="inp" type="text" value="aaa">
<input name="inp" type="text" value="bbb">
<input name="inp" type="text" value="ccc">
$("input[name='inp']")each(function(){alert($(this)val());})
扩展资料:
取出form中的input:
<script type="text/javascript" language="JavaScript" charset="UTF-8">
$(document)ready(function(){
var a=$("form input");
$each(
a,
function(name,object){
alert(name+":"+$(object)val());
}
);
});
</script>
以上就是关于如何通过jQuery把select option中的选项取到label中全部的内容,包括:如何通过jQuery把select option中的选项取到label中、jquery怎么获取name属性的值、jquery如何根据多选框name来获得选中的值。等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)