使用 FOR 属性从与单选按钮关联的 html 标签中获取值答案

【问题标题】：Get value from html label assiociated with radiobutton using FOR attribute使用 FOR 属性从与单选按钮关联的 html 标签中获取值
【发布时间】：2013-12-11 02:53:45
【问题描述】：

带有单选按钮的 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#) 单击单选按钮时如何获取值？还有哪个更适合使用。

【问题讨论】：

你在用jquery吗？
我正在尝试使用 javascript，但 jquery 也可以。
values 是什么意思？单选值或表单元素值
它的单选值。如果用户选择任何选项并提交它，我应该能够获得选定的单选值。
可以用纯javascript来完成。我会发布答案

标签： c# javascript html asp.net for-attribute

【解决方案1】：

试试这个脚本：

    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>

这里是 Demo

或者

在后面的代码中你可以这样做来获得价值。

string radioValue = String.Format("{0}", Request.Form['sex']);

【讨论】：

我实际上需要标签值。您使用无线电名称获取值是否可以获取标签值。
label.innerHTML 工作，但 label.innerText 不工作不知道为什么？
@SDKLive innerText 是非标准的，它与textContent 有很大不同，因为第一个是进行漂亮的打印（例如，
转换为新行），而第二个一 - 不是。

【解决方案2】：

请试试这个： 1.为每个输入标签添加属性class="sex"。 2.使用jquery你可以这样做：

$('.sex').click(function(){
   alert($(this).val());
})

【讨论】：

【解决方案3】：

对@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>

【讨论】：