[英]Get value from html label assiociated with radiobutton using FOR attribute
具有单选按钮的html表单,该表单与如下所示的HTML标签相关联。
<form action="demo_form.aspx">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
当用户使用Java脚本或服务器端脚本(ASP.Net- C#)单击单选按钮时,如何获取值? 还有哪一种更适合使用。
试试这个脚本:
window.onload = function () {
var btnSubmit = document.getElementById('btn-submit');
btnSubmit.onclick = function (e) {
e.preventDefault();
var radioInputs = document.querySelectorAll('#myform input[type="radio"][name="sex"]');
for (var i = 0; i < radioInputs.length; i++) {
if (radioInputs[i].checked)
{
var value = getlabelforValue(radioInputs[i]);
alert(value);
}
}
document.getElementById("myform").submit();
};
};
function getlabelforValue(inputname) {
var labelElements = document.querySelectorAll('#myform label');
for (var i = 0; labelElements[i]; i++) {
console.log(labelElements[i]);
if (labelElements[i].getAttribute('for') == inputname.getAttribute('id')) {
return labelElements[i].innerText || labelElements[i].textContent;
}
}
return null;
}
HTML:
<form id="myform" action="demo_form.aspx">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male" /><br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female" /><br />
<input type="submit" id="btn-submit" value="Submit">
</form>
这是 演示
要么
在后面的代码中,您可以这样做以获取价值。
string radioValue = String.Format("{0}", Request.Form['sex']);
请尝试以下操作:1.添加到每个输入标签属性class =“ sex”。 2.使用jquery可以这样:
$('.sex').click(function(){
alert($(this).val());
})
重做了@bios提供的脚本。 这是脚本的较短版本。
window.onload = function () {
var btnSubmit = document.getElementById('btn-submit');
btnSubmit.onclick = function (e) {
e.preventDefault();
var radioInputs = document.querySelectorAll('#myform input[type="radio"][name="sex"]');
var labelElements = document.querySelectorAll('#myform label');
for (var i=0; i<radioInputs.length; i++){
for (var j = 0; labelElements[j]; j++) {
if (radioInputs[i].checked)
{
var rdval = radioInputs[i].getAttribute('id');
var lblval = labelElements[j].getAttribute('for');
if(rdval == lblval){
var val = labelElements[j].textContent;
alert(val);
}
}
}
}
};
};
HTML
<form id="myform" action="demo_form.aspx">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male" /><br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female" /><br />
<input type="submit" id="btn-submit" value="Submit">
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.