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 に答える