Formularz HTML z przyciskami radiowymi, które wiąże się z etykietą HTML, która wygląda tak.

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

Jak uzyskać wartości, gdy użytkownik kliknie przyciski radiowe za pomocą JavaScript lub używając skryptu Server-Side (ASP.net-C #)? A także który z nich będzie bardziej odpowiedni do użycia.

0
suds 26 listopad 2013, 09:12

3 odpowiedzi

Najlepsza odpowiedź

Wypróbuj ten skrypt:

    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>

Oto Demo ..

Lub

W kodzie za sobą możesz to zrobić, aby uzyskać wartość.

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

1
super 26 listopad 2013, 07:44

Spróbuj tego: 1. Dodaj do każdej klasy atrybutu znacznika wejścia = "seks". 2. Użyj jQuery, możesz to zrobić:

$('.sex').click(function(){
   alert($(this).val());
})
0
Ringo 26 listopad 2013, 05:36

Przerobiony na skrypt podany przez @BIOS. Jest to krótsza wersja skryptu.

 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>
0
sudhakarssd 26 listopad 2013, 10:24