一个提交表单,有下拉框,多选框和文本框,怎么点击按钮获取选定的框的value值。用jQuery

一个提交表单,有下拉框,多选框和文本框,怎么点击按钮获取选定的框的value值。用jQuery,第1张

1、引入jQuery库

2、给按钮绑定点击事件

3、在点击事件里获取选定得框的值

代码去下:

$("#按钮的id")click(function(){

var tmp = $("#选定得框的id")val();

});

^_^

requestform("多选列表框名称")

例如:

testasp

<html>

<head><title></title></head>

<body>

<form method="post" action="Resultasp">

<input type="checkbox" name="ck1" value="1">足球

<input type="checkbox" name="ck2" value="1">篮球<br />

<input type="submit" name="TJ" value="提交">

</form>

</body></html>

resultasp

<%

'获取表单提交的数据

ck1 = requestform("ck1")

ck2 = requestform("ck2")

if ck1=1 and ck2=1 then bg="足球与篮球"

if ck1=1 and ck2<>1 then bg="足球"

if ck1<>1 and ck2=1 then bg="篮球"

if ck1<>1 and ck2<>1 then bg="没有选择"

%>

<html>

<head><title>B页面</title></head>

<body>

<p>你选择了:<%=bg%></p>

<p><a href="testasp" target="_self">返回继续测试</a></p>

</body></html>

或者:

testasp

<html>

<head><title></title></head>

<body>

<form method="post" action="Resultasp">

<input type="checkbox" name="ck" value="足球">足球

<input type="checkbox" name="ck" value="篮球">篮球<br />

<input type="submit" name="TJ" value="提交">

</form>

</body></html>

Resultasp

<%

'获取表单提交的数据

ck = split(requestform("ck"),",")

responsewrite "你选择了:"

for i= 0 to Ubound(ck)

responsewrite ck(i)

next

%>

<html>

<head><title>B页面</title></head>

<body>

<p><a href="testasp" target="_self">返回继续测试</a></p>

</body></html>

可以参考下面的代码:

$(document)ready(function(){

varchecked=[];

$("#submitButton")click(function(){

$('input:checkbox:checked')each(function(){

checkedpush($(this)val());

});

alert(checked);

});

});

扩展资料:

jquery参考函数

$(”元素名称”)html(”<b>new stuff</b>”); 给某元素设置内容 

$(”元素名称”)removeAttr(”属性名称”) 给某元素删除指定的属性以及该属性的值 

$(”元素名称”)removeClass(”class”) 给某元素删除指定的样式 

$(”元素名称”)text(); 获得该元素的文本 

$(”元素名称”)text(value); 设置该元素的文本值为value

参考资料来源:百度百科-jQuery

这种东西你提交上去了之后,struts应该有对应的标签和写法,如果实在不行的话,你可以自己写一个方法,在jsp中提交之前就拼好一个字符串提交给后台,比如说选择的项中间用逗号分隔,之后你在后台再拆分出来呗。

protected void Page_Load(object sender, EventArgs e)

{

CheckBox chk = new CheckBox();

chkText = "testall"; // 这里可以换成数据库的内容

chkCheckedChanged += new EventHandler(chk_CheckedChanged);

chkAutoPostBack = true;

PageFormControlsAdd(chk);

for (int i = 0; i < 10; i++)

{

CheckBox chk2 = new CheckBox();

chk2Text = "test" + iToString(); // 这里可以换成数据库的内容

chk2Checked = (i % 3 == 0); // 这里可以换成数据库的内容

PageFormControlsAdd(chk2);

}

}

void chk_CheckedChanged(object sender, EventArgs e)

{

CheckBox all = sender as CheckBox;

foreach(Control ctl in PageFormControls)

{

if (ctl is CheckBox)

{

CheckBox chk = ctl as CheckBox;

chkChecked = allChecked;

}

}

}

根据多选框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);

});

})

观察效果

以上就是关于一个提交表单,有下拉框,多选框和文本框,怎么点击按钮获取选定的框的value值。用jQuery全部的内容,包括:一个提交表单,有下拉框,多选框和文本框,怎么点击按钮获取选定的框的value值。用jQuery、asp 如何获取多选列表框的值、jquery怎样获取多个复选框的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存