0

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

4

3 回答 3

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']);

于 2013-11-26T05:43:34.267 回答
0

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

$('.sex').click(function(){
   alert($(this).val());
})
于 2013-11-26T05:36:45.723 回答
0

对@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>
于 2013-11-26T10:24:36.350 回答